TheKeithStewart / angular-esri-components

A set of Angular components to work with ArcGIS API for JavaScript v4.6
Apache License 2.0
43 stars 28 forks source link

Cannot read property 'setTransform' of undefined error #15

Closed kaden0428 closed 7 years ago

kaden0428 commented 7 years ago

I program with angular-cli project. And I get the error message as title and code as below:

import { Component, OnInit } from '@angular/core';
import { EsriLoaderService } from 'angular-esri-loader';
@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
  webMapProperties: __esri.WebMapProperties = {
    basemap: "hybrid"
  };
  mapViewProperties: __esri.MapViewProperties = {
    zoom: 13,
    center: [121.5, 25]
  };
  map: __esri.Map;
  mapView: __esri.MapView;

  constructor(private esriLoader: EsriLoaderService) { }

  ngOnInit() {
  }

  onMapInit(mapInfo: { map: __esri.Map, mapView: __esri.MapView }) {
    this.map = mapInfo.map;
    this.mapView = mapInfo.mapView;
    this.esriLoader.loadModules([
      'esri/layers/FeatureLayer',
      'esri/renderers/SimpleRenderer',
      'esri/symbols/SimpleMarkerSymbol',
      'esri/Color',
      'esri/tasks/QueryTask',
      'esri/tasks/support/Query',
      'esri/geometry/SpatialReference',
      'esri/layers/GraphicsLayer',
      'esri/Graphic',
      'esri/geometry/Point',
      'esri/layers/Layer'
    ]).then(([FeatureLayer, SimpleMarkerSymbol, SimpleRenderer, Color,
      QueryTask, Query, SpatialReference, GraphicsLayer, Graphic,
      Point, Layer]:
      [__esri.FeatureLayerConstructor, __esri.SimpleMarkerSymbolConstructor,
        __esri.SimpleRendererConstructor, __esri.ColorConstructor,
        __esri.QueryTaskConstructor, __esri.QueryConstructor,
        __esri.SpatialReferenceConstructor, __esri.GraphicsLayerConstructor,
        __esri.GraphicConstructor, __esri.PointConstructor, __esri.Layer]) => {

      let sym = new SimpleMarkerSymbol({
        size: 10,
        color: new Color("#0000FF"),
        style: 'square',
        outline: {
          color: new Color("#FFFF00"),
          width: 3
        }
      });

      this.mapView.then(res => {
        let gc = new Graphic({
          geometry: new Point({ longitude: 121.54717481541498, latitude: 25.048117052172238 }),
          symbol: sym
        });
        this.mapView.graphics.add(gc);
      });

    })
  }
}

I try to add a point graphic to the map.

kaden0428 commented 7 years ago

The error image as below image

TheKeithStewart commented 7 years ago

Hi @kaden0428,

I see that you got this working with the angular-esri-loader at https://github.com/tomwayson/angular-esri-loader/issues/25. Are you still having an issue with it here?

kaden0428 commented 7 years ago

Thank you for your attention and sorry for never update the status. I had solved problem since I had simplified the load modules as below: I think the problem maybe is that all loaded modules and declared names should have the same order. image