Wait for component to load before activating any routes in Angular

I my project I'm using map as main element, placed in app.component.html:

<div #gmap style="width: 100%;height: 100%;"></div>


In app.component.ts

@ViewChild('gmap', {static: true}) gmap;
...
ngOnInit(): void {
this.loadMap(this.gmap, position);
}


Some of routes are performing changes in this map(adding/removing markers etc.) and everything is working well when started from homepage. But when some other endpoint is typed directly to browser, app is crashing because map is not ready. For example when trying to get boundaries:

ERROR TypeError: Cannot read properties of undefined (reading 'getNorthEast')


How to force any routing to wait for map being loaded? For some cases I've been using resolvers but in this I'm not sure how it should be done, since map is loaded in component, not service.

Thanks

Continue reading...