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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_44781409/article/details/95626551

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

ng new angualrdemo --skip-install

二 、创建带路由模块：

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/user/components/profile
ng g component module/user/components/order

ng g component module/article
ng g component module/article/components/articlelist
ng g component module/article/components/info

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

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

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

五、配置懒加载

六、定义路由出口

运行效果如图 :

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

添加对应跳转按钮

效果展示

路由配置完成!