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>

你可能感兴趣的:(angular,前端)