Angular 4 延缓加载组件

1. 创建App

ng new lazySample --routing

 

在app组件中的定义路由

 Angular 4 延缓加载组件

 

2. 创建“Lazy” Module

1
2
3
ng g module lazy --flat
ng g component lazy-parent --module lazy
ng g component lazy-child --module lazy

 创建组件lazy-parent和lazy-child 

 

 Lazy 模块的定义

Angular 4 延缓加载组件

 

lazy-parent组件定义

Angular 4 延缓加载组件

 

3. 将App路由指向Lazy模块

Angular 4 延缓加载组件

使用loadChildren属性

4. 最后测试,

ng serve后调用localhost:8080

然后点击 “Click Here”按钮

Angular 4 延缓加载组件

 

点击后,发现

Angular 4 延缓加载组件

多了一个0.chunk.js, 这个就是新的路由后,加载进来的js。从而达到延缓加载的目的。

参考https://angularfirebase.com/lessons/how-to-lazy-load-components-in-angular-4-in-three-steps/



本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/p/7428150.html,如需转载请自行联系原作者