Angular 5库AOT编译适配及性能、依赖等相关问题咨询

我来帮你梳理下Angular库做AOT发布的几个关键问题，结合实战经验给你一些明确的指引：

1. 提供AOT编译后的库，开发者能获得性能收益吗？ #

肯定能，但收益只针对使用AOT编译的应用开发者：

• 构建阶段：应用的AOT编译器不需要再编译你库中的模板，能大幅减少整体构建时间
• 运行阶段：浏览器加载应用时，不需要像JIT那样实时编译模板，首屏启动速度会明显提升

如果开发者还是用JIT模式运行应用，你的AOT版本库对他们的运行时性能没有帮助——因为JIT会重新编译所有模板，包括你库中的内容。

2. 依赖的第三方库（如ng-bootstrap）需要是AOT编译形式吗？ #

不需要。Angular的AOT编译器在处理你的库时，会自动解析依赖库的元数据文件（.metadata.json），只要这些依赖库本身符合Angular的AOT兼容要求（比如官方维护的ng-bootstrap，已经在npm包中包含了必要的元数据和类型定义），即使它们是JIT形式的源码或UMD包，也能被你的AOT编译过程正确处理。

你只需要确保依赖的第三方库是正规的Angular包（比如从npm官方源安装，并且package.json中有typings或types字段）即可，不用特意寻找它们的AOT专属版本。

3. 拆分为packageName和packageName-aot两个包是否可行？ #

可行，但完全没必要，反而会增加你的维护成本，也给用户带来选择负担。

更优雅的方案是在同一个包中同时兼容JIT和AOT模式，让Angular的构建工具自动适配：

• 在package.json中，main字段指向JIT版本的UMD包（供JIT应用直接引入）
• 添加module字段指向ES2015模块入口（支持Tree Shaking）
• 添加es2015字段指向更高级的ES模块文件
• 确保包中包含编译生成的.metadata.json和.d.ts类型文件

这样，当用户用AOT编译应用时，Angular会自动读取元数据并复用你的库的静态分析结果；用JIT时则直接加载UMD包，完全不需要用户手动区分版本。

4. 除了代码重构，发布AOT兼容库还需注意哪些事项？ #

除了你提到的模板中私有变量改公共、移除箭头函数等，还有这些关键细节：

• 修正tsconfig.json的拼写错误：你当前配置里的strictMedtadataEmit是拼写错误，应该是strictMetadataEmit: true——这个选项必须开启，它会强制检查元数据生成的合规性，避免隐藏的AOT兼容问题。另外，如果要让用户的AOT编译器能处理你的模板，建议把skipTemplateCodegen设为false（它控制是否生成模板编译后的工厂文件）。
• 规范组件/指令的元数据：
  • 模板中用到的所有组件、指令必须在declarations或imports中明确声明，不能动态引入
  • 装饰器（如@Component）中不能使用动态计算的值（比如selector: getDynamicSelector()），AOT编译器需要静态可分析的元数据
  • 优先用@Input()/@Output()装饰器声明输入输出属性，而非inputs/outputs数组（虽然数组形式也支持，但静态分析可靠性更低）
• 正确配置npm包的发布内容：
  • 要发布编译后的ES模块文件（.js）、类型定义文件（.d.ts）和元数据文件（.metadata.json）
  • 不要发布未编译的源码（除非你想让用户自定义编译），但必须保留类型定义
  • 在package.json中明确设置main、module、typings、es2015等字段，让构建工具能正确找到对应文件
• 做AOT兼容性测试：
  • 搭建一个测试用的Angular应用，用@ngtools/webpack配置AOT编译，并引入你的库，运行构建命令检查是否有编译错误
  • 测试Tree Shaking效果，确保未被使用的库组件不会被打包到最终应用中
• 处理自定义样式：如果你的库包含自定义样式，建议用styleUrls引用外部样式文件（并确保样式文件也被打包进npm包），或者把样式内联到组件中，避免AOT编译时找不到样式资源的问题。

5. 关于@ngtools/webpack的AOT编译配置补充 #

用@ngtools/webpack编译库时，除了修正tsconfig.json的拼写错误，还要注意：

• webpack配置中必须使用AngularCompilerPlugin，并正确指定tsConfigPath指向你的库的tsconfig.json
• 确保编译输出目录中包含.metadata.json文件——这是AOT兼容的核心，没有它用户的AOT编译器会重新编译你的库模板
• 除非你要发布完全预编译好的UMD包（灵活性很差，不推荐），否则不需要强制生成.ngfactory.ts文件，让用户的AOT编译器根据元数据处理模板即可，这样能更好地适配他们的应用环境。

内容的提问来源于stack exchange，提问作者nashcheez