This can be reproduced using the current repository. Just open Synched-Views.

The following Chrome Console Warning has me a bit worried, and I would like to know if there are any plans to work around this. I am not sure exactly why this is being thrown.

Invoking 'send()' on a sync XHR during microtask execution is deprecated and will be removed in M53, around September 2016. See https://www.chromestatus.com/features/5647113010544640 for more details.

Thanks!

Maybe consider calcite-maps or calcite-bootstrap.

When using your EsriMapViewComponent instead of the EsriSceneViewComponent, I see the view (and zoom controls), but the image (the map itself) is not shown.

How can this be fixed?

Seems like the slider change events can be treated as a stream and would be a good demo of how to use observables to debounce expensive operations.

See http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

I try to follow the way of "angular2-esri-playground" by adding the following example in the project:
https://developers.arcgis.com/javascript/latest/sample-code/watch-for-changes/index.html
everything works fine, map shows up, no error message. When I click on the map, popup windows show up, but the following code:

view.on("click", function(evt) {
  var info = "</br><span> view click event: </span> x: " + evt.mapPoint.x.toFixed(2) + " y: " + evt.mapPoint.y.toFixed(2);
  //displayMessage(info);
  console.log(info);
});

doesn't work.
Thanks in advance.

This doesn't seem to work with the latest Angular release candidate, 2.0.0-rc.4. The application doesn't get past the loading screen, and console shows numerous 404 errors. Any tips to get it running?

• replace systemjs with esri-loader
• update angular, jsapi and make sure latest & greatest best practices are being followed
• move systemjs code to a frozen branch
• note all these changes in the README

@tomwayson @jwasilgeo
I discovered this issue in my own project and narrowed it down to the map loading.
You can verify this by implementing NgAfterViewChecked in one of your components.

I found the solution from this post:
http://stackoverflow.com/questions/38995262/how-to-disable-angular2-change-detection-for-3rd-party-libraries

Basically you want to wrap the map and mapView loads with ngZone.runOutsideAngular(()=>{})

esri-map-view.component.ts:
ngOnInit() {
this.zone.runOutsideAngular(() => {
this.view = new MapView({
.......
}.bind(this));
});
}

map.service.ts:
constructor(private zone: NgZone) {
this.zone.runOutsideAngular(() => {
this.map = new Map({
........
});
});
}

Wrapping the the MapView seems to fix the continuous change detection,
but wrapping the Map reduced the number of rounds of change detection even further.

I haven't observed any side-effects in my own project from doing this. Hope this helps somebody. I thought this issue was going to be my demise.

Get router working properly, esp. with gh-pages. Might need to use #.

Not sure why but when I first ran npm start I got the following errors. But, after I reloaded the app manually in the browser everything worked okay after that.

I'm just documenting it here in case anyone else has the same issue.

app/esri-scene-view.component.ts(30,13): error TS2345: Argument of type '{ container: any; map: any; zoom: number; center: number[]; rotation: number; }' is not assignable to parameter of type 'SceneViewProperties'.
[0]   Object literal may only specify known properties, and 'rotation' does not exist in type 'SceneViewProperties'.
[0] app/geometry-engine-showcase.component.ts(95,36): error TS2339: Property 'bufferDistance' does not exist on type '{ [key: string]: AbstractControl; }'.
[0] app/geometry-engine-showcase.component.ts(104,36): error TS2339: Property 'bufferDistance' does not exist on type '{ [key: string]: AbstractControl; }'.
[0] app/geometry-engine-showcase.component.ts(166,46): error TS2345: Argument of type '{ color: number[]; outline: any; }' is not assignable to parameter of type 'SimpleFillSymbolProperties'.
[0]   Types of property 'color' are incompatible.
[0]     Type 'number[]' is not assignable to type 'Color'.
[0] app/geometry-engine-showcase.component.ts(168,51): error TS2345: Argument of type '{ color: number[]; width: number; }' is not assignable to parameter of type 'SimpleLineSymbolProperties'.
[0]   Types of property 'color' are incompatible.
[0]     Type 'number[]' is not assignable to type 'Color'.
[0]       Property 'a' is missing in type 'number[]'.
[0] app/geometry-engine-showcase.component.ts(189,50): error TS2345: Argument of type '{ color: number[]; outline: any; }' is not assignable to parameter of type 'SimpleFillSymbolProperties'.
[0]   Types of property 'color' are incompatible.
[0]     Type 'number[]' is not assignable to type 'Color'.
[0] app/geometry-engine-showcase.component.ts(191,55): error TS2345: Argument of type '{ color: number[]; width: number; }' is not assignable to parameter of type 'SimpleLineSymbolProperties'.
[0]   Types of property 'color' are incompatible.
[0]     Type 'number[]' is not assignable to type 'Color'.
[0] app/map.service.ts(20,28): error TS2345: Argument of type '{ basemap: string; layers: (FeatureLayer | GraphicsLayer)[]; }' is not assignable to parameter of type 'MapProperties'.
[0]   Types of property 'layers' are incompatible.
[0]     Type '(FeatureLayer | GraphicsLayer)[]' is not assignable to type 'Collection'.
[0]       Property 'add' is missing in type '(FeatureLayer | GraphicsLayer)[]'.

Hi,

I am new to ESRI and this library helped me load my map and do my click events. But, I have run into a situation where I am to load a Dynamic layer.

My code changes to Support it :

1. Modify load.ts file to load the dependency. '/esri/DynamicLayer'

2. I tried to add this layer in the MapService and am getting an exception as shown below :

Map service Code :
import { Injectable } from '@angular/core';
import Map from 'esri/Map';
import FeatureLayer from 'esri/layers/FeatureLayer';
import GraphicsLayer from 'esri/layers/GraphicsLayer';
import DynamicLayer from 'esri/layers/DynamicLayer';

@Injectable()
export class MapService {
map: any = null;
constructor() {
this.map = new Map({
basemap: 'dark-gray-vector',
ground: 'world-elevation',
layers: [
new DynamicLayer({
url: 'http://:6080/arcgis/rest/services/LIVE_PUBLIC/MapServer',
id: 'dynamic'
//intialExtent: [-90.74357428329998, 34.07762761854514, -81.21343491069999, 38.4992983226478]
}),
new FeatureLayer({
url: 'http://:6080/arcgis/rest/services/LIVE_PUBLIC/MapServer',
id: '0'
})
]
});
}
}

Exception :
TypeError: Cannot read property 'on' of undefined
at Object.set (js.arcgis.com/4.3/esri/layers/support/ExportImageParameters.js:6)
at c.set (js.arcgis.com/4.3/init.js:228)
at Object.set [as layer] (js.arcgis.com/4.3/init.js:317)
at m (js.arcgis.com/4.3/init.js:300)
at Object.m (js.arcgis.com/4.3/init.js:300)
at Object.set (js.arcgis.com/4.3/init.js:209)
at Object.postscript (js.arcgis.com/4.3/init.js:208)
at new (js.arcgis.com/4.3/init.js:219)
at Object.a.attach (js.arcgis.com/4.3/esri/views/2d/layers/MapImageLayerView2D.js:5)
at a._attachLayerView (js.arcgis.com/4.3/esri/views/MapView.js:28)
at Object.update (js.arcgis.com/4.3/esri/views/MapView.js:26)
at h._animationFrame (js.arcgis.com/4.3/init.js:332)
at ZoneDelegate.invokeTask (zone.js:367)
at Object.onInvokeTask (:3000/node_modules/@angular/core/bundles/core.umd.js:3971)
at ZoneDelegate.invokeTask (zone.js:366)

I am stuck with this for a few days now. Any help would be great !

I, along with many other developers, use Visual Studio as my primary development tool. It would be so valuable to have a starter Visual Studio project that can be the basis for building apps that use the latest from ESRI and Angular. I've tried to create a Visual Studio 2015 project based on the code in this repository. It can be found at [https://github.com/CraigAP/Angular2MapStart.git]. It builds, but trying to run it results in JavaScript errors.

I had originally posted this in the Angular1 repository, but this is where it belongs.