please help me with a sample to perform a point clustering using esri-loader and angular4,
a sample plunkr would be awesome as i read all theposts for couple of days and still having issues.

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
}

Using the Angular webpack implementation I am having an issue where it seemingly is trying to resolve dojo scripts locally?

dojo.js:6 DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:4200/dojo/arcgis-js-api/views/2d/engine/vectorTiles/WorkerTileHandler.js' failed to load.

How do I fix this issue?

At our meeting last week @andygup and I talked about best ways to make esri-loader and arcgis-webpack-plugin versions of this code easily available to users without having to maintain multiple repos.

I have an initial proof of concept on an esri-loader-cli-project branch, which takes the component code from master and incorporates it into a finished basic cli project, which I'll PR shortly.

Additional considerations:

• which code should eventually live on master, the esri-loader example or the arcgis-webpack-plugin code?
• can GitHub allow us to protect multiple branches in a repo to prevent users from accidentally pushing changes to these finished example branches?

I would like to use the esri-map in an Angular 7 application as an interactive map that I can feed a datasource of markers and polylines. Is that a capability of this module?

I am using angular 6 and esri-loader.
I followed an example that ESRI has on GitHub at https://github.com/Esri/angular-cli-esri-map. Here are the exact steps that I did to confirm.

Follow the instructions on the sample through the part where you generate a new component named esri-map. Before adding the contents of the new esri-map files, confirm that you can successfully build using “ng build --prod”. Remove the “sourceMap”: false from the production configurations section of the angular.json file. Confirm that the “ng build --prod” still works.

Continue on with the sample. After making the other changes up to the point where they ask you to run “ng serve” try and build using “ng build --prod”.

For me, the build stalls at 95% at this point. If I reinsert the sourceMap: false “ng build --prod” succeeds

I am not sure why…any information would be greatly appreciated.

Thanks!

According to the official docs, arcade expressions are supposed to be placed between <script> tags:

When writing multi-line expressions, we recommend you place it in a separate <script> tag outside the JavaScript portion of the app, and set the type to text/plain with a unique ID you can use to reference the script in the appropriate place within JavaScript.

<script type="text/plain" id="adult-population">
  // place multi-line Arcade expression here
</script>
Then you can reference the script as a string value by calling the document.getElementById() method.

renderer.valueExpression = document.getElementById("adult-population").text;

Is there a better way to do this in Angular? I ask because in Angular, as far as I know, you're not supposed to reference DOM elements directly.

I tried placing an expression like that in my index.html. It works, but it's quite silly because you can't use ES6 features like const or arrow functions, because that JS snippet is being run by the browser which doesn't support those those features natively.

I am trying to format the date in the popup on the map in ArcGIS for Javascript using the online documentation

Consider the following code:

        const fieldInfo = new FieldInfo({
            fieldName: "startDate",
            format: new FieldInfoFormat({ dateFormat: "long-month-day-year" })
        });

        const popup = new PopupTemplate( {
            title: "Project: <a href=\"http://pr/profile.aspx?pid={projectNumber}\" target=\"_blank\" >{projectName}</a>",
            content: "<p><b>Start Date:</b> {startDate}  <b>End Date</b>: {endDate}<p>"
            fieldInfos: [ fieldInfo ]
        });

I can't seem to get the fieldInfos format to format the date. The date keeps coming out in the default format:

Any ideas to what is causing the issue?

for reference here are my dependencies:

"dependencies": {
    "@angular/animations": "^9.1.11",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "^9.1.11",
    "@angular/compiler": "^9.1.11",
    "@angular/core": "^9.1.11",
    "@angular/forms": "^9.1.11",
    "@angular/localize": "^9.1.11",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "^9.1.11",
    "@angular/platform-browser-dynamic": "^9.1.11",
    "@angular/router": "^9.1.11",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
    "@types/arcgis-js-api": "^4.15.0",
    "classlist.js": "^1.1.20150312",
    "rxjs": "^6.5.5",
    "tslib": "^1.13.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^8.4.1",
    "@angular-devkit/build-angular": "^0.900.7",
    "@angular/cli": "^9.1.9",
    "@angular/compiler-cli": "^9.1.11",
    "@angular/language-service": "^9.1.11",
    "@arcgis/webpack-plugin": "^4.15.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.12.47",
    "codelyzer": "^5.2.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "^5.4.4",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.7.5"
  }

Hello, When I am running npm install on the code downloaded from the arcgis-webpack-angular branch I am getting various errors like :
19753 warn tar ENOENT: no such file or directory, lstat 'D:\TechnicalCode\AngularArcGIS\angular-cli-esri-map-arcgis-webpack-angular\node_modules.staging\aria-query-585221cf\lib\etc\roles\dpub'
19754 warn tar ENOENT: no such file or directory, open 'D:\TechnicalCode\AngularArcGIS\angular-cli-esri-map-arcgis-webpack-angular\node_modules.staging\rxjs-78aaf8f2\util\TimeoutError.js'
19755 warn tar ENOENT: no such file or directory, open 'D:\TechnicalCode\AngularArcGIS\angular-cli-esri-map-arcgis-webpack-angular\node_modules.staging\rxjs-0a2353dd\internal\util\TimeoutError.js'

I am attaching the debu.log file. I tried running npm install multiple times but got same error.
2020-11-09T20_02_13_168Z-debug.log

esri-map does not seem to work with angular material components. Is there a work-around for this? The following code does not seem to work.

<mat-card> Hello <app-esri-map (mapLoadedEvent)="mapLoadedEvent($event)"> </app-esri-map> </mat-card>

Any sample code would be helpful.

Thanks!

Hello

Follow up this issue Esri/arcgis-webpack-plugin#78 (comment), the userDefinedExcludes doesn't seem to affect the bundle size.

Using branch : arcgis-webpack-angular

Thank you

Hallo,
I added an Question on GeoNet too(https://community.esri.com/thread/234376-esri-angular-with-pointdrawaction)

I tried to setup ESRI JS API with Angular, but I was not able to implement "PointDrawAction".
For a better troubleshooting I setup this Repository: https://github.com/Meeett/PointDrawActionLag
For PontDrawAction I used: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-draw-PointDrawAction.html

It seems that ESRI JS API is not well supported to use it with angular?

If anybody could find a solution it would be awesome!

We are excited to announce that at 4.18 (December 2020), the ArcGIS API for JavaScript will available as ES modules (beta) for use with local builds via npm @arcgis/core. More info can be found in this early announcement blog post.

The draft plan is to reorganize this repo and consolidate everything back into the main branch. This will involve breaking changes to the current organization that contains multiple branches.

• Main branch
  • README
    • As of 4.18 there are two approaches:
      • npm install (ESM build) - This will be the recommended approach and the modules will be bundled with the build. npm install @arcgis/core will be superseding the need to use arcgis-webpack-plugin and the additional configuration that comes with it. For a working sample, link to the new ES module samples on the jsapi-resource repo.
      • Lazy loading modules at runtime via esri-loader - these modules are lazy-loaded at runtime from a CDN using a loadModules() pattern and are not bundled with the build.
    • Brief explanation that the repo is only tested against the latest shipping version of Angular.
    • Delete the arcgis-webpack-plugin branch and just provide a link to the old commit if someone wants to see how to use it.
  • /esri-loader-sample - this will be the only working sample in the repo.

esri-view not showing when used height percentage in esri-view class
it showing only when provide the height in pixel !

esri view {
height:100%
}

Hi ,

I am getting issue like "undefined ls-remote -h -t ssh://[email protected]/Esri/dojox.git" when executing the npm install command for the webpack version.
there is another warning is also running continuously in terminal like no such file or directory, open 'E:\angular-cli-esri-map\node_modules.staging\type-847b7516\test\safe-integer\ensure.js'

how can I add this library or is there any workaround on this?

I am looking into using the arcgis-angular-webpack branch as an example for how to implement nice module loading for the ArcGIS JS API in our Angular application. I have used the branch as an example, and it seems to work pretty well. One thing of note, however, is that when you import modules the way the example shows:

import Map from "arcgis-js-api/Map";
import MapView from "arcgis-js-api/views/MapView";

They are imported as any
This is pretty problematic to use, and in a lot of cases, people like to use the noImplicitAny compiler flag. This workflow will not allow you to do that.

In my experimentation, I was able to structure the imports as such:

import * as Map from "esri/Map";
import * as MapView from "esri/views/MapView";

This is using the module names as defined in the typings, and by doing so, the imported modules come in with the correct typings. It seems much nicer this way, and everything seems to continue functioning.

My question is: Is what I am doing a bad practice in some way?
If not, could the example be updated to import in this way?

Thanks,
Eben

I had posted this on the Esri community page and @andygup suggested creating the issue here.

I have a project I have been building for the past year with no apparent issues with the FeatureLayer, and something changed recently I cannot pinpoint what exactly changed because I did not update any packages.

All of my FeatureLayers give me this error:

and I have no idea how to resolve it. I created a repo which is a slimmed-down version of my MapModule and I get the same error. You can clone, install dependencies, and 'ng serve' which should reproduce the issue.

The FeatureLayer in this specific repo is supplied by local government and outlines property boundaries, but this happens to any FeatureLayer I have in my project.

Thanks for taking the time to take a look

Repo: https://github.com/RyannGalea/arcgistest.git

import urlUtils from '@arcgis/core/core/urlUtils';

This doesn't work.

Good Day

If you add a button that removes / adds the map with an ngIf, the memory the map held isn't getting free'd.

`<button (click)="map = false">Disable Map
<button (click)="map = true">Enable Map

<ng-container *ngIf="!_map">

<ng-container *ngIf="_map">
<app-esri-map
[center]="mapCenter"
[basemap]="basemapType"
[zoom]="mapZoomLevel"
(mapLoadedEvent)="mapLoadedEvent($event)">

`

How can the map be fully destroyed, including the WebGL context?

Hi:

I followed all the installation instructions for a brand new Angular CLI 6 project. When I run ng serve, Webpack gives the following error at compile-time:

ERROR in src/app/esri-map/esri-map.component.ts(24,15): error TS2503: Cannot find namespace '__esri'.

Please note that this error does not impact functionality. The maps loads just fine in the browser, and esri-map.component.ts is finding the correct typings from @types/arcgis-js-api/index.d.ts. I'm just giving you a heads up.

Here is my package.json:

  "dependencies": {
    "@angular/animations": "^6.0.0-rc.5",
    "@angular/common": "^6.0.0-rc.5",
    "@angular/compiler": "^6.0.0-rc.5",
    "@angular/core": "^6.0.0-rc.5",
    "@angular/forms": "^6.0.0-rc.5",
    "@angular/http": "^6.0.0-rc.5",
    "@angular/platform-browser": "^6.0.0-rc.5",
    "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
    "@angular/router": "^6.0.0-rc.5",
    "@types/arcgis-js-api": "^4.6.0",
    "core-js": "^2.5.4",
    "esri-loader": "^2.2.0",
    "rxjs": "^6.0.0-uncanny-rc.7",
    "rxjs-compat": "^6.0.0-uncanny-rc.7",
    "zone.js": "^0.8.24"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.5.0",
    "@angular/cli": "~6.0.0-rc.4",
    "@angular/compiler-cli": "^6.0.0-rc.5",
    "@angular/language-service": "^6.0.0-rc.5",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2",
    "prettier": "^1.10.2",
    "tslint-config-prettier": "^1.7.0"
  }

I'm finding that the login window, which appears when using a resource that requires authentication, is not working with ArcGIS Server JS API version 4.15 and the Angular CLI with esri-loader.

To reproduce, modify the sample app to use a secure webmap and esriConfig pointing to your portal (in place of a simple map object):

      const [EsriWebMap, EsriMapView, esriConfig] = await loadModules([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/config"
      ]);

      esriConfig.portalUrl = "https://path-to-the-portal";
      const webMap: esri.WebMap = new EsriWebMap({
        portalItem: {
          id: "secure-item-id"
        }
      })

Then initialise the view against the webmap item. The "sign in" dialog should appear in a modal popup, but using version 4.15 of the ArcGIS Server JS API it appears outside of the app-root object.

In this example it's still useable, but in my case I have a full-screen map so the sign-in dialog is appearing underneath the map and so can't be accessed.

If I manually downgrade the ArcGIS Server JS API version to 4.14 in the esri-loader configuration, the sign-in dialog works as expected, so the problem appears to have been introduced in version 4.15.

Thanks for any advice

https://www.youtube.com/watch?v=ZEH9kOwDgx0. Thanks @hhkaos!

I installed arcgis/webpack-plugin (^4.14) and noticed that my application in chrome in tablet or mobile mode has issues with panning/dragging.
If I run this git hub code it is giving me the same problem. If I change arcgis/webpack plugin to 4.13 then it works fine.

Hi:

I originally meant to file this as an issue/question, but I poked around the codebase and got my answer. I'm leaving this here to serve as documentation in case anyone else gets stuck.

The ArcGIS docs recommend using WebGL rendering rather than default SVG rendering for creating client-side Feature Layers.

In order to do this, the docs say:

To enable WebGL rendering for FeatureLayers, paste the following script in your application prior to loading the ArcGIS API for JavaScript:

    <script>
      var dojoConfig = {
        has: {
          "esri-featurelayer-webgl": 1
        }
      };
    </script>

In order to ensure that this flag is set before the main ArcGIS script gets loaded, all you need to do is pass it as the second argument in the loadingModules method (imported from esri-loader, located at node_modules/esri-loader/dist/esm/esri-loader.js).

So all you need to change is this:

public ngOnInit() {

  const dojoConfig = {
    has: {
      'esri-featurelayer-webgl': 1
    }
  }

  loadModules([
    'esri/WebMap',
    'esri/Map',
    'esri/views/MapView',
    'esri/widgets/Search',
    'esri/layers/MapImageLayer'
    'esri/layers/FeatureLayer'
  ], { dojoConfig } ) // <---- add custom options
    .then(([WebMap, EsriMap, MapView, Search, MapImageLayer, FeatureLayer]) => {

I did notice a speed boost in loading my map, but haven't confirmed 100% that WebGL is loading. So if you think there's a better way do let me know. Thanks.

Reference: Esri/esri-loader#234

Angular 6 release is pending: https://github.com/angular/angular/blob/master/CHANGELOG.md

Hi!
Currently tests are failing on arcgis-webpack-angular.
Is there any way to run tests with arcgis webpack plugin?

I saw one solution with switching to Jest test runner and using moduleNameMapper, but is there any way to test application which is using arcgis webpack with karma test runner?

Hello,

I have a little problem with your esri-map.component.ts.

I have just clone your repo and when i do the ng serve i have this error :

ERROR in src/app/esri-map/esri-map.component.ts(4,15): error TS2503: Cannot find namespace '__esri'.

Have you this problem too ?

Can you help me ?

Thank you :)

Hello everyone. I have some code that I wrote with the normal ArcGIS Javascript v4 style. Now I'm trying to get the same result with Angular. But its not working out as expected, the hovering with graphic is not displaying, the querying out the feature is not displaying in console or browser.
Any help to determine where I went wrong would be much appreciated.

Github repo: https://github.com/tatemcg/ng-esri-jsv4/blob/master/src/app/esri-map/esri-map.component.ts
StackBlitz: https://stackblitz.com/github/tatemcg/ng-esri-jsv4

Below are my code that I'm trying to convert to Angular.

v4_3.txt

I'm seeing this in my console after upgrading to the new version of the esri loader. Any ideas?

[esri.widgets.CoordinateConversion.CoordinateConversionViewModel]
dojo.js:249
h {name: "coordinate-conversion:local-storage-read-error", message: "Could not get widget state from stored JSON.", details: Object}
dojo.js:249
details:Object {error: TypeError: Cannot read property 'formats' of undef…}
message:"Could not get widget state from stored JSON."
name:"coordinate-conversion:local-storage-read-error"
proto:a {constructor: , toJSON: , type: "error"}
constructor:function h(c,e,b){ … }
[[FunctionLocation]]:internal#location
[[Scopes]]:Scopes[3]
arguments:null
caller:null
fromJSON:function(a){ … }
length:3
name:"h"
prototype:a {constructor: , toJSON: , type: "error"}
proto:function a(e,l,h){ … }
toJSON:function(){ … }
[[FunctionLocation]]:internal#location
[[Scopes]]:Scopes[3]
arguments:null
caller:null
length:0
name:""
prototype:Object {constructor: }
constructor:function(){ … }
proto:Object {constructor: , defineGetter: , defineSetter: , …}
proto:function () { … }
type:"error"

Hello,
I seem to be having trouble getting the result back when using the hitTest() on a click event.
The hitTest() in ngOnInit() works fine and return the expected result for the initial displaying layer (see screenshot). But when I switch to a different layer, the second hitTest() in ngOnChanges() does not return anything(undefined) in the console (see screenshot).
Not sure what I did wrong, any pointers/help to resolve this issue would be appreciated. Thanks!

github link: https://github.com/tatemcg/ng_10_esri
stackblitz link: https://stackblitz.com/github/tatemcg/ng_10_esri

1st layer - Point

2nd layer - County

For DevSummit update the esri-loader version along with any other updates including Angular. Also look at switching the JS API css to use setDefaultOptions({ css: true }); Hopefully previous component life-cycle issues have been resolved in Angular 8, need to test it.

Minor clean up issue. Esri-loader reference got copied from master when the arcgis-webpack-angular branch was originally created.

I am trying to rewrite the Sample Code for "Create a FeatureLayer with client side graphics" in Typescript rather than plain JS. I got all my red squigglies to go away but am running into an issue at compile-time because of my imports.

I know I can load modules like this:

public ngOnInit() {
  loadModules([
    'esri/views/MapView',
    'esri/Map',
    'esri/geometry/Point',
    'esri/widgets/Legend',
    'esri/request'
  ])
    .then(([MapView, EsriMap, EsriPoint, EsriLegend, EsriRequest]) => {

However, this scopes my EsriLegend variable to my then block. I want to reuse it in another method outside. For example I want to go const legend = new EsriLegend() in a helper function defined outside of ngOnInit.

To achieve this, I tried:

import * as Legend from 'esri/widgets/Legend'

But the compiler complains:

Module not found: Error: Can't resolve 'esri/widgets/Legend' in '~/projects/topcoder/dubai/rta/src/app/map'

I then tried this (like the docs curiously seem to recommend):

import Legend = require('esri/widgets/Legend')

But got this error instead:

ERROR in src/app/map/map.component.ts(28,1): error TS1202: Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.

Here is my full attempt at a Typescript rewrite: https://gist.github.com/jplew/c0ebade552034ea1630ec05067bd18e4

Thanks very much.

I'm using esri map with Angular. I'm getting the points from the server. And for each point I'm adding a graphic.
For each graphic (point) added, I'm setting a PopupTemplate.
Everything works fine for the graphics, but an empty PopupTemplate is showing randomly when pressing the second (right) click of the mouse.
Here's how I'm setting the PopupTemplate:

Here's a normal popup working fine:

And here's the random popup showing randomly on the right click of the mouse:

So can anybody tell me why the random popup is being displayed when pressing the right click of the mouse ?
Please and thank you.

Hi all,

Apology before hand if this isn't the right space for my questions. I still relative new with Web development and especially with Angular. I have managed to put together some code from ArcGIS JS v3 with Angular, but I can't seem get the map to resize correctly on the browser with bootstrap.
Any help or tips on how to do this would be appreciated!
Source code: https://github.com/tatemcg/nG-ArcGIS-JS3

Thanks,

I am reporting an issue with

TypeScript definitions
[X ] another resource in this repository
My application which is in production for more than a year now and is built using arcgis js 4.x and angular breaks once I upgrade it to use 4.12.

The map and other esri widgets like layer, search and legend DO not load.

This is the error that I get in the debugger "Object.getPrototypeOf: 'this' is not an Object" .

If I downgrade the arcgis js version from 4.12 to 4.10 the map and other widgets like layer, search and legend load fine.

what changed to cause this?

FYI, I have all the IE 11 polyfills .

============================================
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements /
import 'classlist.js'; // Run npm install --save classlist.js.
/* IE10 and IE11 requires the following for the Reflect API. /
import 'core-js/es6/reflect';
import 'core-js/es7/array';
import 'core-js/es7/object';
/* Evergreen browsers require these. /
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';
/

Required to support Web Animations @angular/platform-browser/animations.
Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
/
import 'web-animations-js'; // Run npm install --save web-animations-js.
/*************************************************************************************************
Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.

Hi,
I'm updating production application from version 4.11 to 4.12 (target is 4.17). I encountered an error in IE11. FF and Edge on chromium work correctly.
This application is quite complicated and related to the internal resources of the company, so I prepared a simple one based on the sample application provided by you. It's in this repository:
https://github.com/kelylah/arcgis-ng
Master branch is with ArcGIS JS API 4.12 version when 'arcgis411' is with version 4.11.
I tried to make dependencies as similar as possible to the production application. Dependencies aren't the newest one.
It is ejected and has custom webpack configuration.
The error that appears in IE11 console is: Object expected, zone.js (240,1) in Zone.prototype.scheduleTask

As we settle with TJ from Esri Customer Care the breaking change between 4.11 and 4.12 was using Fetch API despite esri/request:
esri/request now uses the Fetch API internally to request resources. When not available (e.g. with IE11), we use a fetch polyfill instead.
https://developers.arcgis.com/javascript/latest/breaking-changes/#412

This issue looks similar to issue #43
Looking forward to any clues.

Adam

Test with Angular 8. There will be some changes like query timings on ViewChild.

https://angular.io/guide/static-query-migration

I have managed to add a search widget to the Angular github sample. My modified code looks like:

    async initializeMap() {
    try {
      // Load the modules for the ArcGIS API for JavaScript
      const [EsriMap, EsriMapView, Search, Locator] = await loadModules([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Search",
        "esri/tasks/Locator"
      ]);
      const locator = new Locator({url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"});

      const search = new Search(this._view);

      // Configure the Map
      const mapProperties: esri.MapProperties = {
        basemap: this._basemap
      };

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

      // Initialize the MapView
      const mapViewProperties: esri.MapViewProperties = {
        container: this.mapViewEl.nativeElement,
        center: this._center,
        zoom: this._zoom,
        map: map
      };

      this._view = new EsriMapView(mapViewProperties);
      this._view.ui.add(search, "top-right");
      await this._view.when();
      return this._view;

How would I add the search widget to the web page without a map?

I would also like my search widget to have the same styling (css?) as the rest of my inputs which are bootstrap.

How would I override the styling so all my inputs are consistent in look and theme?

I've noticed that I am unable to use the __esri namespace in more than one component or service in my applicaiton. For example, I have a MapComponent class which sets up my basemap, and and a LegendComponent class which sets up an interactive legend to turn on/off layers. However, when I attempt to use access the __esri namespace in the LegendComponent class, I get this error:

ReferenceError: __esri is not defined
    at Module../src/app/legend/legend.component.ts (c:\...\src\app\legend\legend.component.ts:3:15)
    at __webpack_require__ (http://localhost:4200/runtime.js:79:30)
    at Module../src/app/app.module.ts (http://localhost:4200/main.js:137:105)
    at __webpack_require__ (http://localhost:4200/runtime.js:79:30)
    at Module../src/main.ts (c:\...\src\main.ts:1:1)
    at __webpack_require__ (http://localhost:4200/runtime.js:79:30)
    at Object.0 (http://localhost:4200/main.js:1009:18)
    at __webpack_require__ (http://localhost:4200/runtime.js:79:30)
    at checkDeferredModules (http://localhost:4200/runtime.js:46:23)
    at Array.webpackJsonpCallback [as push] (http://localhost:4200/runtime.js:33:19)

Removing the LegendComponent class from the application resolves the error. How can I use the __esri namespace in places other than just a single component?

ionic4 +angular6 load map blank

I was able to get a prototype running using arcgis-webpack-plugin and Angular 8 CLI.

There's still a little bit of testing that needs to be done before converting this repo over from esri-loader. And, please send me your feedback 😄. The steps I took to build the prototype are outlined below. I "think" I captured everything from my notes, but let me know if I missed something.

1. Do a fresh install of an app using the Angular 8 CLI (latest). You can find more info here: https://cli.angular.io/.

2. Install this handy helper for a custom webpack builder:

   npm i -D @angular-builders/custom-webpack.

   Here's the doc and code: https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack

3. Install arcgis-webpack-plugin:

   npm install --save-dev @arcgis/webpack-plugin --verbose.

   Here's a reference to doc and code: https://github.com/Esri/arcgis-webpack-plugin

4. Install ArcGIS JS API types:

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

5. In angular.json under projects.architect I replaced build and serve with the following

        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            },
            "outputPath": "dist/angular-builder-esri",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "angular-builder-esri:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular-builder-esri:build:production"
            }
          }
        },

6. I made a few minor tweaks to tsconfig.json. I'm not sure what was 100% necessary since I was just trying to get things going, it will take more testing to determine which libs are needed for example.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types",
      "./types"
    ],
    "lib": [
      "dom",
      "es2015.promise",
      "es5",
      "es6"
    ],
  }
}

7. Create a new file in root called extra-webpack.config.js:

const ArcGISPlugin = require('@arcgis/webpack-plugin');
/**
 * This is where you define your additional webpack configuration items to be appended to
 * the end of the webpack config.
 */
module.exports = {
  plugins: [new ArcGISPlugin()],
  node: {
    process: false,
    global: false,
    fs: "empty"
  }
};

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

9. At this point I'd recommend doing a test serve by running ng serve and seeing if there are any errors. If there are errors then fix them now before moving on.

10. Generate the scaffolding for your mapping component

  ng g component esri-map

11. Copy the app.components contents from angular-cli-esri-map/src/app into your new esri-app/src/app/ directory. Yep, I know, the app.component.html file still has some text referring to esri-loader, I'll fix that later.

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

13. Replace the contents of esri-map.components.ts with the code from this gist: https://gist.github.com/andygup/b4736f8a7cc97a007a196dcb42af74cf

14 Give it a go: ng serve. This is definitely not optimized. It should compile without errors. Here's a partial screenshot of my build console messages. I had a few extra goodies in my test app so you can ignore the esri-geometry message:

And here's the app running

getting below error

RenderingCore2D.js:378 Framebuffer is incomplete!
a.initialize @ RenderingCore2D.js:378
a.bindFramebuffer @ RenderingCore2D.js:406
e.beforeRenderChildren @ RenderingCore2D.js:41
e.renderChildren @ RenderingCore2D.js:39
f.doRender @ MapView.js:569
e.doRender @ RenderingCore2D.js:47
h.processRender @ MapView.js:576
e.renderFrame @ RenderingCore2D.js:39
render @ RenderingCore2D.js:35
executeFrameTasks @ dojo.js:373
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
requestAnimationFrame (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
b @ dojo.js:370
e @ dojo.js:369
g @ dojo.js:369
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
MapView.js:595 WebGL: INVALID_VALUE: texImage2D: width or height out of range

I have a project based on this repo. It has been working fine with v 4.16. I wanted to upgrade to v 4.17. I changed the package.json to 4.17 for the webpack-plugin and the types. I also updated the web workers per this page: https://github.com/Esri/arcgis-webpack-plugin#usage

When I run npm install I get a strange shell window that says templates are not found in ...AppData\Local\Temp\pacote-git-template\git-clone-d24dlb2d although the install completes. When I run ng serve the application won't start. I get a TypeError:

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined at Function.from (buffer.js:313:9)

When I switch back to 4.16 and do npm install and ng serve it works again as expected. Is v 4.17 ready to use with webpack and angular?

Add doc and/or example(s) of using the local css and the ArcGIS JS API workers.

I've implemented the example in my project using version 4.7 of the API. In my scss file, I can set the mapViewNode to height: 500px and the map appears, but obviously doesn't fill the screen if it taller than 500px.

I tried setting it to height: 100% and the map never shows. There aren't any errors in the console and it appears to load all the scripts as it should, but never loads any tiles.

I'm not sure what I should do next in troubleshooting this, any suggestions?

map.component.ts:

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

import esri = __esri;

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

  // ESRI Loader options
  loaderOptions = {
    url: 'https://js.arcgis.com/4.7/'
  };

  // Default values
  private _zoom = 10;
  private _center = [-89.600223, 37.378633];
  private _basemap = 'streets';

  @Input()
  set zoom(zoom: number) {
    this._zoom = zoom;
  }
  get zoom(): number {
    return this._zoom;
  }

  @Input()
  set center(center: any[]) {
    this._center = center;
  }
  get center(): any[] {
    return this._center;
  }

  @Input()
  set basemap(basemap: string) {
    this._basemap = basemap;
  }
  get basemap(): string {
    return this._basemap;
  }

  @Output() mapLoaded = new EventEmitter<boolean>();

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

  constructor() { }

  ngOnInit() {
    loadModules([
      'esri/Map',
      'esri/views/MapView'
    ], this.loaderOptions)
    .then(([EsriMap, EsriMapView]) => {
      // Set type for Map constructor properties
      const mapProperties: esri.MapProperties = {
        basemap: this._basemap
      };

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

      // Set type for MapView constructor properties
      const mapViewProperties: esri.MapViewProperties = {
        container: this.mapViewE1.nativeElement,
        center: this._center,
        zoom: this._zoom,
        map: map
      };

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

      mapView.when(() => {
        // All the resources in the MapView have loaded. Now execute additional processes
        this.mapLoaded.emit(true);
      }, err => {
        console.error(err);
      });
    })
    .catch(err => {
      console.error(err);
    });
  }

}

map.component.html:

<!--The div that the map gets injected into-->
<div #mapViewNode id="mapViewNode"></div>

map.component.scss (not working):

@import url('https://js.arcgis.com/4.7/esri/themes/dark/main.css');
#mapViewNode {
    height: 100%;
}

map.component.scss (working):

@import url('https://js.arcgis.com/4.7/esri/themes/dark/main.css');
#mapViewNode {
    height: 500px;
}

Initial, although very brief, tests using esri-loader with Angular 9 passed.

const [EsriMap, EsriMapView,FeatureLayer,DynamicLayer,ClassBreaksRenderer] = await loadModules([
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer',
'esri/layers/ArcGISDynamicMapServiceLayer',
'esri/renderers/ClassBreaksRenderer'
]);
I am getting 404 error when try to load ArcGISDynamicMapServiceLayer using arcgis JavaScript API version 4.10.