Angular6 自定义模块以及配置路由实现模块懒加载

一、Angular 创建一个默认带路由的项目

ng new angualrdemo --skip-install
 

二 、创建带路由模块：

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

三、在对应的模块中创建组件：

ng g component module/user
 ng g component module/user/components/profile
 ng g component module/user/components/orderng g component module/article
 ng g component module/article/components/articlelist
 ng g component module/article/components/infong g component module/product
 ng g component module/product/components/plist
 ng g component module/product/components/pinfo
 

各模块中已经自动引入对应模块的组件

四、手动引入匹配对应模块的路由

五、配置懒加载

六、定义路由出口

运行效果如图 :

七、在子模块中添加子路由
在上面的基础上添加配置
子模块路由配置

添加对应跳转按钮

效果展示

路由配置完成!