Angular 4 延缓加载组件

简介:

1. 创建App

ng new lazySample --routing

 

在app组件中的定义路由

 

 

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 模块的定义

 

lazy-parent组件定义

 

3. 将App路由指向Lazy模块

使用loadChildren属性

4. 最后测试,

ng serve后调用localhost:8080

然后点击 “Click Here”按钮

 

点击后,发现

多了一个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,如需转载请自行联系原作者

目录
相关文章
|
7月前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
4月前
|
开发者 Windows Android开发
跨平台开发新选择:揭秘Uno Platform与.NET MAUI优劣对比,帮你找到最适合的框架,告别选择困难症!
【8月更文挑战第31天】本文对比了备受关注的跨平台开发框架Uno Platform与.NET MAUI的特点、优势及适用场景。Uno Platform基于WebAssembly和WebGL技术,支持Windows、iOS、Android及Web平台,而.NET MAUI由微软推出,旨在统一多种UI框架,支持Windows、iOS和Android。两者均采用C#和XAML进行开发,但在性能、平台支持及社区生态方面存在差异。Uno Platform在Web应用方面表现出色,但性能略逊于原生应用;.NET MAUI则接近原生性能,但不支持Web平台。开发者应根据具体需求选择合适的框架。
173 0
|
4月前
|
JavaScript 测试技术
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
32 0
|
5月前
|
前端开发 JavaScript
前端框架与库 - Angular基础:组件、模板、服务
【7月更文挑战第16天】Angular,谷歌维护的前端框架,专注构建动态Web应用。组件是核心,包含行为逻辑的类、定义视图的模板和样式。模板语法含插值、属性和事件绑定。服务提供业务逻辑,依赖注入实现共享。常见问题涉及组件通信、性能和服务注入。优化通信、性能并正确管理服务范围,能提升应用效率和质量。学习组件、模板和服务基础,打造高效Angular应用。
72 1
|
6月前
|
JavaScript 小程序 API
技术经验分享:Angular动态创建组件之Portals
技术经验分享:Angular动态创建组件之Portals
|
7月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
7月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
JavaScript 定位技术
Angular1.x入门级自定义组件(导航条)
Angular1.x入门级自定义组件(导航条)
|
资源调度 JavaScript 容器
Angular封装WangEditor富文本组件
Angular封装WangEditor富文本组件
324 0
|
资源调度 前端开发 Java
使用Angular CDK实现一个Service弹出Toast组件
使用Angular CDK实现一个Service弹出Toast组件
142 0