CODEWITHSUNDEEP
angularangular-router
Jason
Jason

Reputation: 1376

angular routing in lazy loaded module with child routes

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

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

Upvotes: 1

Views: 2589

Answers (1)

Sumama Waheed
Sumama Waheed

Reputation: 3609

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);

Upvotes: 3

Related Questions