I have a problem with lazy loading not about to route to a named router-outlet. Can someone look at where I when wrong? I have a mainpage where there is a link to Product -> default router outlet and Product Detail -> named router outlet.
<div>
<div><a [routerLink]="['product']"> Product </a> </div>
<div><a [routerLink]="['productdetail',{outlets:{productdetail: 'detail'}}]"> Product Detail </a> </div>
<div> <router-outlet></router-outlet></div>
<div> <router-outlet name="detail"></router-outlet>
</div>
Below is the plunker code.
Plunker Code
If you want to check how lazy loading works and how lazy loading routing flow, then Augury is the best tool we have. Click on ctrl+F12 to enable the debugger and click on the Augury tab. Click on the router tree. Here, it will show the route flow of our modules.
LoadChildrenlink A function that returns a set of routes to load.
Disadvantages. The code can get complicated as we have to add extra lines of code to implement lazing loading in Angular. Lazy loading can affect the user experience. For instance, if a user scrolls a web page quickly, they may have to wait for the pictures on the page to load.
Lazy loading is an approach to limit the modules that are loaded to the ones that the user currently needs. This can improve your application's performance and reduce the initial bundle size. By default, Angular uses eager loading to load modules.
This is known bug, you can track the issue here
The workaround or we can say solution to this issue is, use non-empty paths for your top level routes if auxilary(i.e. named) routes exist in a lazy loaded module.
The only flaw I can see is, an additional url segment added in routes
MainRoutingModule: Top level non-empty path(i.e. "path: 'load'")
import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainpageComponent } from './mainpage.component';
import { ProductComponent } from './product.component';
import { ProductDetailComponent } from './productdetail.component';
const childroutes: Routes = [
{ path: 'load', component: MainpageComponent ,
children: [
{path: 'product', component: ProductComponent
{path: 'productdetail', component: ProductDetailComponent,
outlet: 'detail'
},
]
},
];
export const routing: ModuleWithProviders = RouterModule.forChild(childroutes);
const newLocal: NgModule = {
imports: [RouterModule.forChild(childroutes) ],
exports: [RouterModule, ],
declarations: []
};
@NgModule(newLocal)
export class MainRoutingModule { }
MainpageComponent:The correct syntax to use the secondary routes.
[routerLink]="[{outlets:{detail:['productdetail']}}]"
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-main',
template: `
<div>
<div><a [routerLink]="['product']"> Product </a> </div>
<div><a [routerLink]="[{outlets:{detail:['productdetail']}}]"> Product Detail </a> </div>
<div> <router-outlet></router-outlet></div>
<div> <router-outlet name="detail"></router-outlet>
</div>
`,
encapsulation: ViewEncapsulation.None,
})
export class MainpageComponent {}
LoginComponent:
Use [routerLink]="['mainpage/load']" to load the main module.
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'app-login',
template: `This is login page place holder <br> <a [routerLink]="['mainpage/load']">Go to Main Page</a>`,
})
export class LoginComponent implements Oninit, OnDestroy {
constructor() {}
ngOnInit(): void {}
}
Demo:https://plnkr.co/edit/0ZpNL3lvbRbexLzQqRZh?p=preview
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With