Using ArcGIS JS API types with Angular

[andygup]

This should probably be added to the readme, but for now I'm going to simply open this as an issue.

Step 1: create an empty app using Angular CLI - https://angular.io/guide/quickstart Step 2: Run the following commands

npm install --save esri-loader

For 3.x run

npm install --save @types/arcgis-js-api@3 

For 4.x run

npm install --save @types/arcgis-js-api 

Step 3: In tsconfig.app.json add "types": ["arcgis-js-api"].

Step 4: copy and paste the following code into app.component.ts. Note this is a 3.x example, the code will be different for 4.x.

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { loadModules } from 'esri-loader';
import * as esri from 'esri';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  @ViewChild('mapViewNode') private mapViewEl: ElementRef;

  public ngOnInit() {

    const options = {
      url: 'https://js.arcgis.com/3.25/'
    };

    loadModules([
      'esri/map'
    ], options)
      .then(([Map]) => {

        let mapOptions: esri.MapOptions = {
          basemap: 'streets',  // For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [0.1278, 51.5074], // longitude, latitude
          zoom: 10
        };

        let map = new Map(this.mapViewEl.nativeElement, mapOptions);

      })
      .catch(err => {
        console.error(err);
      });
  } // ngOnInit
}

And, here's a 4.x example:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { loadModules } from 'esri-loader';

import esri = __esri;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  @ViewChild('mapViewNode') private mapViewEl: ElementRef;

  public ngOnInit() {

    loadModules([
      'esri/Map',
      'esri/views/MapView'
    ]).then(([EsriMap, EsriMapView]) => {

      // Set type of map
      const mapProperties: esri.MapProperties = {
        basemap: 'streets'
      };

      const map: esri.Map = new EsriMap(mapProperties);

      // Set type of map view
      const mapViewProperties: esri.MapViewProperties = {
        container: this.mapViewEl.nativeElement,
        center: [0.1278, 51.5074],
        zoom: 10,
        map: map
      };

      const mapView: esri.MapView = new EsriMapView(mapViewProperties);
    });
  } // ngOnInit
}

[shengzheng1981]

if you use esri-loader, you need not to install types. just loadModules and callback.

[andygup]

Thanks, yes, the arcgis types are optional.

[duavipul]

I am facing issue to load portal map along with portal url & id in webmap viewer.Can someone let me know how I can do that.

[andygup]

@duavipul are you using ArcGIS API for JavaScript 3.x or 4.x?

You should be able to follow the patterns from this sample: https://developers.arcgis.com/javascript/latest/sample-code/webmap-basic/index.html

[duavipul]

Hello Andy,

Thanks for your reply,actually I am looking for the map with widgts & layers from our portal , map is made in web builder with dojo js.Kindly help.

Thanks & regards

Vipul DuaHTML5/Flash Developer+918879192172

On Mon, Dec 17, 2018 at 10:01 PM Andy notifications@github.com wrote:

@duavipul https://github.com/duavipul are you using ArcGIS API for JavaScript 3.x or 4.x?

You should be able to follow the patterns from this sample: https://developers.arcgis.com/javascript/latest/sample-code/webmap-basic/index.html

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Esri/angular-cli-esri-map/issues/17#issuecomment-447908255, or mute the thread https://github.com/notifications/unsubscribe-auth/AFV4-0iQMkGCVYyY5cWLQlxIcYdink3Iks5u58blgaJpZM4WqHP8 .

[andygup]

@duavipul you have an application built with Web AppBuilder for ArcGIS? https://doc.arcgis.com/en/web-appbuilder/create-apps/what-is-web-appbuilder.htm

If that's the case, I'm not aware of any samples that demonstrate how to embed Web AppBuilder in Angular. I'll send you an email with additional details.

[HaidarZ]

If you are using a version less than Angular 7, the following steps maybe required if you want to use the Esri Typescript Types.

I'm using Angular 7 and cannot use the types without registering them in the tsconfig. Am I missing any setup configuration?

[shengzheng1981]

arcgis js api will die with dojo！！please save it. focus on new tech and keep move!

[HaidarZ]

Can you please clarify?

[shengzheng1981]

just kidding

[andygup]

@HaidarZ It sounds like I need to rewrite the typescript configuration section of the README. There's a few interesting things about Typescript configuration. Let me know if the explanation below helps?

Here's my first draft attempt to help clarify:

• Using the arcgis-js-api type definitions, or any type definitions, in your app is optional.
• If you aren't using the arcgis type definitions then definitely don't declare them in tsconfig.app.json because that will cause compile errors.
• If you are using type definitions you have two choices for how to use them within your app:
  • automatic inclusion,
  • explicit inclusion
• Automatic inclusion is the default setting. This means your tsconfig.app.json file will not have a compilerOptions.types property. _Keep in mind that automatic inclusion is only important if you’re using files with global declarations (as opposed to files declared as modules). If you use an import "foo" statement, for instance, TypeScript may still look through node_modules & nodemodules/@types folders to find the foo package. As an example, the tsconfig.app.json file would look like this:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app"
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

• If your tsconfig.app.json file does have a compilerOptions.types setting there are two options:
  • Explicit inclusion. Using"types": ["arcgis-js-api"] means ONLY include the arcgis type files for the \app directory. Other packages under node_modules/@types/* will not be included.
  • Disable automatic inclusion. Using "types": [] means disable automatic inclusion of all type files for the \app directory. If you have installed types and try to use them in your app then this setting will throw compile errors.

Here is an example where tsconfig.app.json explicitly declares the arcgis types, and the types have been installed using npm install --save @types/arcgis-js-api:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["arcgis-js-api"]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Reference: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types

[devilsgeographer]

"Using the arcgis-js-api type definitions, or any type definitions, in your app is optional. " Yes, it is optional, but coding standards highly encourage their use for readability. One should always use type hints where possible and practical.

[andygup]

Closing as per #36. We're switching from a components-based approach in this repo to a self-installing approach.