Angular Cli - Dojo module not found

Question

I am developing an angular application with Argis 4.8 JS api. I need the Dojo / On function. I do not get an error in the compiler either. But when I compile, I get the error "Module not found: Error: Can not resolve 'dojo / on' path". I can not use the Dojo class. What should I do?

My full code

import {Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter} from '@angular/core';
import {loadModules} from 'esri-loader';
import esri = __esri;
import on = require('dojo/on');


function executeIdentifyTask(event: Event | undefined) {
  console.log(event);
}

@Component({
  selector: 'app-esri-map',
  templateUrl: './esri-map.component.html',
  styleUrls: ['./esri-map.component.css']
})

export class EsriMapComponent implements OnInit {

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

  constructor() {
  }

  map: esri.Map;
  mapView: esri.MapView;
  layer: esri.MapImageLayer;
  identifyTask: esri.IdentifyTask;

  async initializeMap() {

    try {
      const [EsriMap, EsriMapView, MapImageLayer, IdentifyTask, IdentifyTaskProperties] = await loadModules([
        'esri/Map',
        'esri/views/MapView',
        'esri/layers/MapImageLayer',
        'esri/tasks/IdentifyTask',
        'esri/tasks/support/IdentifyParameters'
      ]);


      this.map = new EsriMap({
        basemap: 'dark-gray'
      });


      this.mapView = new EsriMapView({
        container: this.mapViewEl.nativeElement,
        center: [27.1428, 38.4237],
        zoom: 15,
        map: this.map
      });

      this.layer = new MapImageLayer(
        {url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer'});

      this.map.add(this.layer);
      this.mapView.when(function () {
        on(this.mapView , 'click' , executeIdentifyTask);
      });

    } catch (error) {
      console.log('We have an error: ' + error);
    }

  }

  ngOnInit() {
    this.initializeMap();
  }

}

Answer 1

I know I am a bit late to the party, but for anyone else having a similar issue, I find that these errors that are described as ones where you can press the F12 key and find the type, but fail to compile correctly, are usually caused by not putting the type within the types: [] array within the tsconfig.app.json.

I experienced a similar issue with the __esri import and kept receiving the following err ERROR in src/app/esri-map/esri-map.component.ts(16,15): error TS2503: Cannot find namespace '__esri'. and upon adding "arcgis-js-api" to my tsconfig.app.json, my problem was resolved.