Angular路由懶加載

路由懶加載

1.創建項目並創建模塊

ng new projectName
ng g m modules/home --routing
ng g m modules/profile --routing
ng g c modules/home
ng g c modules/profile

2.在app-routing.module.ts中配置

const routes: Routes = [
 {path:"home",loadChildren:"./modules/home/home.module#HomeModule"},
 {path:"profile",loadChildren:"./modules/profile/profile.module#ProfileModule"}
];

3.在home-routing.module.ts和profile.routing.module.ts中分別定義路由

home-routing.module.ts文件

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

profile-routing.module.ts文件

const routes: Routes = [
 {path:"",component:ProfileComponent}
];

4.app.component.html

<a [routerLink]="[ '/home' ]">home</a>
<hr>
<a [routerLink]="[ '/profile' ]">profile</a>

<router-outlet></router-outlet>