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>