angulartypescriptagm-core

Angular google maps not working with router-outlet

I am creating an application with a map as header (a global view) and an other map in the middle of the page, representing some detail views. I got this working in this StackBlitz.

Now in order to minimize code duplication I would like to move the header map to a parent component, so I can reuse the global map header in multiple pages. I can do this via the Angular router (children tag). This means the following: 

LayoutComponent (global view map) --> <router-outlet> --> HomeComponent (detail view map)

But somehow only the map in the child component loads. I have reproduced this behavior in this StackBlitz.

Now I want to know, am I doing something wrong here? I cannot seem to find anything why this code shouldn't work.

Versions

Solution

  • It seems you have some structure issues. In your FeatureModule, you load the HomeModule, and render the LayoutComponent. You also have the <router-outlet> in both the AppComponent and in the LayoutComponent. You also need to export certain components in their respective module in order to use them in other modules.

    I have made some structure changes, where the FeatureModule loads the HomeComponent. The appComponent now use the <app-layout>-template, and the layout template will render the correct component according to its path, which is the HomeComponent for the empty path. Now, you have two maps, and the header will stay for all the different components you load.

    Here is an attempt to solve what you had difficulties with: Stackblitz