angular动态加载子模块

模块化开发，懒加载。动态加载子模块配置。

新建模块，带路由

命令：ng g module/user --routing

 

自定义模块下面的根组件创建

命令：ng g component module/user

 

其他组件创建

命令：ng g component module/user/components/home

 

子组件路由配置

user-routing.module.ts 和常规的路由类似

// 组件路由配置：

// 1.import 响应的组件

// 2.在routes list中添加

const routes: Routes = [
  {
    path:'home',component:HomeComponent
  },
  {
    path:'**',component:UserComponent
  }
];

根路由配置

app-routing.module.ts 

//懒加载路由配置，
// path:逻辑路径
// loadChildren:子模块文件行对路径#子模块名
const routes: Routes = [
  {
    path: 'user', loadChildren:'./module/user/user.module#UserModule'
  }
];

效果

根据路由加载，用户模块，文章，商品子模块

这些子模块下面可配置组件路由