Skip to content
Example Angular component for building mapping applications with the ArcGIS API for JavaScript
TypeScript HTML CSS
Branch: master
Clone or download
Latest commit 7aa92d9 Jul 24, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add back app.component.scss to center the text Jul 23, 2019
.gitignore Add back app.component.scss to center the text Jul 23, 2019
LICENSE initial commit Feb 15, 2018 Add a note that adding arcgis-js-api types to the tsconfig is not req… Feb 14, 2019


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

This repo demonstrates implementing a simple, extensible mapping component. Use this repo as a building block for adding in more advanced capabilities.


This repo is only tested to work with the most current versions of the following dependencies.

Note: This repo is designed to work with Angular 6+ only.

Build your project

If you are just getting started with Angular development, listed below are the steps for creating a simple Hello World mapping application with Angular CLI.

Once you are comfortable with the getting started steps, feel free to explore building out the app using the rest of the code in this repo.

There is also a getting started video if that's easier:

Clone or download this repo

  git clone

Install Angular CLI and generate a new project

Create a basic Angular CLI project. Make sure you have Angular CLI installed using standard CSS. See the instructions here:

Install esri-loader and the Esri TypeScript types

You need esri-loader. 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. Note: using the Esri Types is optional. However, you'll need to modify this repos code to work without Types.

  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 from the angular-cli-esri-map/src/app/esri-map folder into your new esri-app/src/app/esri-map directory.

Copy the app.components contents from angular-cli-esri-map/src/app into your new esri-app/src/app/ directory.

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

  • In 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

Navigate to http://localhost:4200/ to see the app. The app will automatically reload if you change any of the source files. If you see the mapping app and it runs without errors then you have been successful with getting started. You can go ahead and shutdown ng serve with a Control C anytime you wish.


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


Copyright 2019 Esri

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

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.

You can’t perform that action at this time.