具有子路由的延迟加载模块中的角度路由

Question

I have an app where every module is lazy loaded. The structure is:

• app
  • grid-module
  • dashboard-module
    • dashboard-grid module
    • chart-module

I have spent all day trying to get links to dashboard-grid-module and chart-module to work but everything I try just makes it worse. It is now to the point where clicking the link for chart-module loads dashboard-module inside dashboard-module and causes call stack limit. I have created an app on stackblitz with the setup. was hoping somebody could help me figure out what to do as the only thing I can think of is not to use routing at all. stack blitz app

Edit for 1st answer:

ah, that is the issue with setting everything up manually. sorry. my actual app has those defined. the difference now between my stackblitz before and my app was that in my app I have to do router.navigate instead of routerlink. so I have now updated it to have the definitions and use buttons with router.navigate. I have also commented out everything I have tried with same results with changes

Answer 1

Answer For Edit 1:

Change this:

<button (click)="doIt('lazy1')">Lazy 1</button> // wrong name
<button (click)="doIt('lazy2')">Lazy 2</button> // wrong name

this.router.navigate(['/' + route]);

To:

<button (click)="doIt('lazychild1')">Lazy 1</button>
<button (click)="doIt('lazychild2')">Lazy 2</button>

this.router.navigate(['/lazy/' + route]);

https://stackblitz.com/edit/angular-rnehv2

Original Answer

You are missing routing definitions in the child modules. Without the routing, the modules will not know which component to render.

Working Example: https://stackblitz.com/edit/angular-fkicz7

const routes: Routes = [
    {
        path: '',
        component: LazyChild1Component
    }
];

export const routing = RouterModule.forChild(routes);