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

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

ng new angualrdemo --skip-install

二 、创建带路由模块:

ng g module module/user --routing

ng g module module/article --routing

ng g module module/product --routing

Angular6+ 自定义模块以及配置路由实现模块懒加载_第1张图片
三、在对应的模块中创建组件:

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

Angular6+ 自定义模块以及配置路由实现模块懒加载_第2张图片
各模块中已经自动引入对应模块的组件
Angular6+ 自定义模块以及配置路由实现模块懒加载_第3张图片
四、手动引入匹配对应模块的路由
Angular6+ 自定义模块以及配置路由实现模块懒加载_第4张图片
五、配置懒加载
Angular6+ 自定义模块以及配置路由实现模块懒加载_第5张图片
六、定义路由出口
Angular6+ 自定义模块以及配置路由实现模块懒加载_第6张图片
运行效果如图 :
Angular6+ 自定义模块以及配置路由实现模块懒加载_第7张图片
七、在子模块中添加子路由
在上面的基础上添加配置
子模块路由配置
Angular6+ 自定义模块以及配置路由实现模块懒加载_第8张图片
添加对应跳转按钮
Angular6+ 自定义模块以及配置路由实现模块懒加载_第9张图片
效果展示
Angular6+ 自定义模块以及配置路由实现模块懒加载_第10张图片
路由配置完成!

你可能感兴趣的:(Angular6,自定义模块,模块懒加载)