angular-cli-esri

This tutorial shows you how to integrate the ArcGIS API for JavaScript, which is an enterprise geospatial API, using Angular CLI.

Dependencies

This repo has the following dependencies:

Angular CLI
ArcGIS API for JavaScript
esri-loader
arcgis-js-api.d.ts Esri TypeScript type definitions

Build your project

Here are the steps for creating a sample Hello World mapping application.

Clone or download this repo

  git clone https://github.com/andygup/angular-cli-esri.git

Install Angular CLI and generate a new project

Make sure you have Angular CLI installed. See the instructions here: https://github.com/angular/angular-cli

Now, let's generate your Angular project.

  ng new esri-app
  cd esri-app
  ng serve

Navigate to http://localhost:4200/ and the basic app should run just fine. The app will automatically reload if you change any of the source files.

If the app ran just fine, go ahead and shut down ng serve by doing a Control-C in the terminal window.

Install `esri-loader` and the Esri TypeScript types

We need esri-loader because it is a low level service that helps load ArcGIS JavaScript API modules (v3.x or v4.x) in non-Dojo applications.

And, the ArcGIS JavaScript TypeScript type definitions can be found here.

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

Generate the scaffolding for your mapping component

  ng generate component esri-map
  
  //or you can also use shorthand
  
  ng g component esri-map

Copy the contents of this repo into the angular-esri-cli-app/src/app/esri-map directory.
Add the following code to the bottom of the app.component.html file.

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

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

Make sure the mapping app runs

Now run the following command and you should see our mapping appear on the page.

  ng serve

If you see the mapping app and it runs without errors go ahead and shutdown ng serve with a Control C.

Build our spec and run it to make sure everything is good

Copy app.component.spec.ts into the /app directory.

  import { TestBed, async } from '@angular/core/testing';
  import { AppComponent } from './app.component';
  import {EsriMapComponent} from './esri-map/esri-map.component';
  
  describe('AppComponent', () => {
    beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          EsriMapComponent
        ],
      }).compileComponents();
    }));
    it('should create the app', async(() => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    }));
    it(`should have as title 'app'`, async(() => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('app');
    }));
    it('should render title in a h1 tag', async(() => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
    }));
  });

Now lets see if the test spec passes.

  ng test

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.

Alaamshaban/angular-cli-esri