Angular中,模块加载的几种方法 原

一、懒加载

   通过路由配置: 

    {
        path: 'flight-booking',
        loadChildren: './flight-booking/flight-booking.module#FlightBookingModule'
    }

好处:这种方式有利于初始减少加载体积 , 不需要在app.module.ts中,主动去引入相应的模块(它们自然不会打包到AppModule中去)。

依赖:主项目必须包含各子模块的源码!

二、动态(懒)加载

参照:angular-elements-dashboard  项目。

在anuglar.json中,配置懒加载的模块路径:

之后,在被动态加载的模块中,用public属性ComponentList,从模块对象上暴露出来所有的组件类。增加它主要是由于动态加载后,不方便从NgModuleRef 的变量上,找到这个当前模块中,到底有哪些组件类,故明确引出。

动态模块准备好了,那接下来要通过 NgModuleFactoryLoader 类开加载它,并且把当前的root模块的injector注入到新模块中去。

现在动态模块已经加载到主的AppModule中来了,如果要动态添加动态模块内的组件,就和普通的动态添加组件的技术一致了:  用ViewContainerRef 的一个变量来创建一个组件createComponent,  并插入到指定位置。

同懒加载一样:

好处:这种方式有利于初始减少加载体积 , 不需要在app.module.ts中,主动去引入相应的模块(它们自然不会打包到AppModule中去)。

依赖:主项目必须包含各子模块的源码!

三、发布一个Library

        从Anuglar6开始,一个工程支持多个项目/库。这里,每一个库相当于一个模块包,它通常包含一个Module,多个Service,Component组件等等。然后它可以构建为APF(Angular Package Formattor)格式的包,发布到npm 供别人使用,也可以在当前项目中被引用。有点类似.Net里的引用库 或 Java中的jar包的感觉。

ng generate library my-lib
ng build my-lib --prod
cd dist/my-lib
npm publish

一行代码未写,就构建了一个组件,Angular还是很强大的。

我们再加一行代码引用这个myLib模块:

通过结果,可以看到它们是打包到一个文件中的。这是由于在Angular中,模块只是逻辑代码隔离的概念, 并非是打包文件的隔离!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏名山丶深处

CentOS快速安装Redis

2389
来自专栏运维小白

2.16 umask

umask命令介绍 umask命令,通过这个值可以确定文件和目录的默认权限是什么。 默认情况下,目录的权限值为755(rwxr-xr-x),普通文件的默认权限为...

2045
来自专栏IT可乐

Linux系列教程(七)——Linux常用命令之帮助和用户管理命令

  上篇博客我们介绍了Linux文件搜索命令,其中find是用的最多的也是功能最强大的文件或目录搜索命令,和另一个搜索命令locate的区别是,find命令是全...

2009
来自专栏Python

CentOS7为firewalld添加开放端口及相关操作

启动一个服务:systemctl start firewalld.service 关闭一个服务:systemctlstop firewalld.service ...

3653
来自专栏xingoo, 一个梦想做发明家的程序员

JSP实现用户登录样例

  业务描述   用户在login.jsp页面输入用户名密码登录:   如果用户名为xingoo,密码为123,则跳转到成功界面login_success.js...

4277
来自专栏Java帮帮-微信公众号-技术文章全总结

04.SVN查看历史/分支/标签

04.SVN查看历史/分支/标签 SVN 查看历史信息 ---- 通过svn命令可以根据时间或修订号去除过去的版本,或者某一版本所做的具体的修改。以下四个命令可...

9535
来自专栏cloudskyme

linux ftp命令参数全集

linux ftp命令参数是我们常用的服务器控制手段。那么我们现在就来介绍一些linux ftp命令参数。希望能帮助大家快速查阅,这些命令都是常用的,肯定会对您...

5179
来自专栏爱撒谎的男孩

Linux使用

4993
来自专栏左瞅瞅,右瞅瞅

SaltStack——配置管理(pillar实战-zabbix-agent)

“zabbix_agent.conf”配置文件引入“Server”变量,在“zabbix_agent.sls”状态文件使用“Server” 变量调用”p...

1673
来自专栏Android干货

LeanCloud云引擎相关问题

2454

扫码关注云+社区

领取腾讯云代金券