How to use angular2-esri-loader in an angular-cli application

Adding angular2-esri-loader to the app and creating a map

NOTE: These instructions apply to trying to use the ArcGIS API for JavaScript in an Angular 2 application created w/ angular-cli. If you're working with more recent versions of Angular, you should use https://github.com/Esri/esri-loader instead.

1. Create a new Angular app by using angular-cli to generate a new project

2. Install angular2-esri-loader

npm install angular2-esri-loader esri-loader --save

3. Generate a new component with ng g component esri-map and use EsriLoaderService to show a map

• copy code from esri-map.component.ts and esri-map.component.css esri-map.component.html below

4. Add the following to the bottom of the import statements in your application's module:

import { EsriLoaderService } from 'angular2-esri-loader';
import { EsriMapComponent } from './esri-map/esri-map.component';

4. Add the following to your application's declarations:

EsriMapComponent

5. Add the following to your application's providers to register angular2-esri-loader's EsriLoaderService:

EsriLoaderService

6. Add the following to the end of your application component's template:

<app-esri-map></app-esri-map>

That's it, run the app with ng serve

Adding the ArcGIS API for JavaScript types

1. Install the types

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

2. Add "arcgis-js-api" to compilerOptions.types in src/tsconfig.app.json and src/tsconfig.spec.json
3. Replace the contents of esri-map.component.ts with the contents of esri-map-with-types.component.ts

Re-run the app with ng serve