I use Yandex Maps API and Angular 6. When I launch the Angular CLI server, I always get the console out:

MapsComponent_Host.ngfactory.js? [sm]: 1

ERROR ReferenceError: ymaps is not defined at MapsComponent.push ../src / app / main-layout / main-layout / maps.component.ts.MapsComponent.ngOnInit (maps.component.ts: 19) at checkAndUpdateDirectiveInline (core.js : 9243) at checkAndUpdateNodeInline (core.js: 10507) at checkAndUpdateNode (core.js: 10469) at debugCheckAndUpdateNode (core.js: 11102) at debugCheckDirectivesFn (core.js: 11062) at ObjecteeeeezeeeezeeeezeeeezeeeezeeeezeeeezeeeezeeeezeeEezeeEezeeEeEeEeEeEeEeEeEeEeEeEeDeNeEndeNodeNodeInline (core.js: 10507) At checkAndUpdateNodeInline (core.js: 10507) At checkAndUpdateNode (core.js: 10469) ngfactory.js? [sm]: 1) at Object.debugUpdateDirectives [as updateDirectives] (core.js: 11054) at checkAndUpdateView (core.js: 10451) at callViewAction (core.js: 10692)

But after I go through the routing for example on the /login component and come back, the map suddenly appears.

My index.html:

 <!doctype html> <html lang="en"> <head> ... </head> <body> </body> <script src="https://api-maps.yandex.ru/2.1/?apikey=...&lang=ru_RU"type="text/javascript"></script> ... </html>

In maps.component.html there is:

 <div id="map" style="width: 600px; height: 400px"></div>

maps.component.ts contains:

 import {Component, OnInit} from '@angular/core'; import {MainLayoutService} from '../main-layout.service'; declare var ymaps:any; @Component({ selector: 'app-dashboard', templateUrl: './maps.component.html' }) export class MapsComponent implements OnInit { properties: object; public map :any; constructor(private service: MainLayoutService) { } ngOnInit() { ymaps.ready().then(() => { this.map = new ymaps.Map('map', { center: [50.450100, 30.523400], zoom: 6 }); }); } }
  • And if you move the script Yandex maps to the head ? although somehow you do not understand, do you have a script element after badi? - overthesanity
  • @overthesanity I changed the name later, for anonymity. It does not matter - Kiryl Aleksandrovich
  • @overthesanity Well, yes, I put all the scripts after badi. Honestly, I don’t remember why, somewhere it was claimed that it was best pracotis, or for lazy loading. I do not remember. Placed, in short, in the head, a map appeared, but the following was thrown into the console: Uncaught TypeError: Cannot set property 'map' of undefined - Kiryl Aleksandrovich
  • I do not know where you read about this best practice :)) stackoverflow.com/a/3037769/10123947 you can complete the error? - overthesanity
  • @overthesanity Here: zone.js: 192 Uncaught TypeError: Cannot set property 'map' of undefined at push ../src / app / main-layout / main-layout / main-layout.component.ts.MainLayoutComponent.initMap (main -layout.component.ts: 23) at ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 421) at Zone.push ../ node_modules / zone.js /dist/zone.js.Zone.runTask (zone.js: 188) at push ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask (zone.js: 496) at ZoneTask.invoke (zone .js: 485) at timer (zone.js: 2054) - Kiryl Aleksandrovich

1 answer 1

Take out the map loading script in head so that it is fully loaded before working with the DOM. Also, an Uncaught TypeError: Cannot set property 'map' of undefined error occurs due to the loss of context, you need to either bind it:

 ymaps.ready().then(this.initMap.bind(this));

Or use the arrow function:

 private initMap = () => { ... }