angular配置路由實現模塊懶加載

創建帶路由配置文件的模塊

ng g module module/user --routing
ng g module module/article --routing
ng g module module/product --routing

創建模塊的根組件

ng g component module/user
ng g component module/article
ng g component module/product

添加其他組件

ng g component module/user/components/profile
ng g component module/product/components/plist
ng g component module/product/components/pinfo

配置子模塊的路由
user-routing.module.ts

//1.引入需要設置的組件
import { UserComponent } from './user.component';
import { ProfileComponent } from './components/profile/profile.component';
//2.配置路由
const routes: Routes = [
  {
    path:'',component:UserComponent
  }，
  {
    path:'profile',component:ProfileComponent
  }
];

配置父子路由

product-routing.module.ts

//1.引用需要的組件
import { PlistComponent } from './components/plist/plist.component';
//2.配置路由
const routes: Routes = [
  {
    path:'',component:ProductComponent,
    children:[
      {path:'plist',component:PlistComponent}
    ]
  }
];

product.component.html

<p>
  product works!
</p>
<router-outlet></router-outlet>

配置根模塊路由

app-routing.module.ts

const routes: Routes = [
  {
    path:'user',loadChildren:'./module/user/user.module#UserModule'

  },
  {
    path:'product',loadChildren:'./module/product/product.module#ProductModule'
  },
  {
    path:'article',loadChildren:'./module/article/article.module#ArticleModule'
  },
  {
    path:'**',redirectTo:'user'
  }
];