创建一个由Angular应用程序使用的Ahead(AOT)编译库

时间:2018-05-18 22:32:09

标签: javascript angular angular5 angular2-aot aot

我有一个Angular 5库,我将其作为一个包公开,供其他应用程序使用rollup消费。

目前,应用程序是使用gulpng-bootstrap编译的即时(JIT)并作为包导出。因此,开发人员应用程序以其JIT编译形式使用我的包。

关于AOT的研究让我相信任何在AOT编译时的Angular应用程序比浏览器上的JIT对应程序更高效。但是,作为一个库开发人员,我想知道如果我公开我的库AOT编译,应用程序开发人员是否会获得任何性能优势?

我使用packageName和许多其他开源库在我的模块中创建组件,并在它们之上添加自定义样式或功能。我在模块中使用的所有库是否也需要使用他们的AOT表格,或者我可以使用他们的JIT对应物?

另外,我认为为我的库提供单独的包是个好主意 - packageName-aot@ngtools/webpack,以便用户可以选择他们想要使用的库。

除了整个代码重构(将模板中使用的私有变量更改为public,删除箭头函数,lambda表达式等)之外,在以AOT形式公开我的库模块之前还有什么需要记住的吗?

由于某些限制,我无法使用Angular CLI,因此必须依赖tsconfig.json才能获得AOT编译。

目前,我的"angularCompilerOptions": { "skipTemplateCodegen": true, "strictMedtadataEmit": true, "fullTemplateTypeCheck": true } 有以下选项:

Cisco Mobility Service Engine

root@xxx.xxx.xxx.xxx's password:
Last login: Thu May 17 14:19:01 from xxx.xxx.xxx.xxx^M
^[]0;root@HOSTNAME:~^G^[[?1034h[root@HOSTNAME ~]# #no-paging-command^M
^[]0;root@HOSTNAME:~^G[root@HOSTNAME ~]#  $TIMESTAMP$=1526592421 ^Gecho no-paging-command^M
no-paging-command^M
^[]0;root@HOSTNAME:~^G[root@HOSTNAME ~]# ^G^M
^[]0;root@HOSTNAME:~^G[root@HOSTNAME ~]#  $TIMESTAMP$=1526592421 ^Ggetserverinfo^M

我在互联网上搜索了很多,但是Angular AOT文档非常模糊,并且对于我在这里尝试做的事情并不是很清楚。任何方向都会非常有用 谢谢!

1 个答案:

答案 0 :(得分:9)

您编写的库以及您的库所依赖的库需要支持AOT 。这就是它的全部内容。

你没有编写和交付一个AOT编译的库( AOT编译形式,就像你所说的那样);消费应用程序将在构建时进行AOT编译。

所有必须做的是确保当消费应用程序执行AOT构建(如果使用Angular CLI时为ng build --prod)时,您的库可以很好地运行。通过播放很好我的意思是,你的库可以使用消费应用程序进行AOT编译而不会出错。

generator-angular2-libraryng-packagr这样的库工具(@angular/cli 6.0.0用来支持构建库的工具)只是为JavaScript构建软件包,仅此而已。

使用应用程序的构建工具来进行AOT构建。这使得库可以被需要它的任何应用程序(或应用程序框架/库)使用。尽量不要过度思考构建/部署库所需的内容。 AOT的繁重工作取决于使用它的应用程序。