Angular and the ArcGIS API
for JavaScript
Seth Batterby, Esri UK

What am I going to cover?
• Angular
- What is it?
- Why we use it?
• Angular and the ArcGIS API for JavaScript
- Using the Esri loader
- Using Exclude and Require
- Esri webpack plugin
Esri UK Annual Conference 2018 | London

Angular – What is it?
• An open source web development framework
• Its more than just a framework!
- Develop across platforms
- End to end tooling
- Templating
- Routing
- Components
Esri UK Annual Conference 2018 | London

Angular – Why do we use it?
• Well suited for large and complex applications
• Makes it easy to implement complex requirements
• Write code in TypeScript, cutting down on bugs and errors
• Lots of tools to speed up development
Esri UK Annual Conference 2018 | London

Sweet AppBuilder
Esri UK Annual Conference 2018 | London
• Complex Angular application
• We use a lot of the Angular Framework
- Animations, Components, Reactive
Forms, Routing, Guards, Resolvers
• Use webpack for builds
• ArcGIS API for JS is used throughout

Angular and the ArcGIS API for JavaScript
- The ArcGIS API for JavaScript is written in Dojo
- It’s a large library of AMD modules
- Most module loaders implement AMD differently than Dojo
We need some workarounds to get Angular and the JS API working
together.
Esri UK Annual Conference 2018 | London

esri-loader
- A tiny library to help load modules
- Written and maintained by Esri
- Lets you control when the API is
loaded
- Can use with 3.x or 4.x versions of
the API
Esri UK Annual Conference 2018 | London

esri-loader
• Pros
- Allows for lazy loading modules, when you need them
- Zero configuration
- Can be used with other frameworks
• Cons
- Have to use complicated async patterns and callbacks
- Cant use import statements
Esri UK Annual Conference 2018 | London

Exclude and Require
Provides a slightly higher level of abstraction
There's a lot more configuration to handle
1. Configure webpack to exclude Dojo modules
2. Output bundles as AMD
3. Load ArcGIS API for JavaScript via a script tag
4. Use Dojo loader to require the bundles
Esri UK Annual Conference 2018 | London

Exclude and Require
• Pros
- Can use Imports for loading modules
- No need to use Promises or callbacks
• Cons
- Can slow down application startup
- Needs some configuration to get working
Esri UK Annual Conference 2018 | London

Esri webpack Plugin (New)
• Pros
- Same as the Exclude and Require pattern but in a handy plugin!
- Much less configuration needed
- Should be future proof
• Cons
- Only works with ArcGIS API >= v4.7
- Only works with webpack
Esri UK Annual Conference 2018 | London

Summary
- Angular
- Great for building complex applications
- There's a steep learning curve
- Wouldn’t recommend it for small applications
- ArcGIS API for JS
- 3 different patterns for loading
- esri-loader most popular
- New webpack plugin is the future!
Esri UK Annual Conference 2018 | London

Additional Resources
• Tom Wayson: How to load ArcGIS API for JavaScript modules
• Esri loader
- Esri loader repository
• Exclude and Require
- Tom Wayson: Using webpack
- Angular 2 with Esri API and webpack
• Webpack plugin
- Using the new webpack plugin for the ArcGIS API for JavaScript
- Webpack-plugin repository
Esri UK Annual Conference 2018 | London