View Engine与IVY构建的库代码差异及自定义库适配咨询

核心代码/编译差异 #

• 元数据处理逻辑
  View Engine依赖静态分析，要求@NgModule/@Component等装饰器参数必须是静态可解析的（比如不能用动态生成的数组），编译后会输出metadata.json供应用侧编译器读取。
  Ivy直接在编译后的JS文件中嵌入专属元数据标识（如ɵmod、ɵcmp），无需额外元数据文件，同时支持更灵活的装饰器写法（库开发建议仍保持静态以优化打包）。
• 编译输出结构
  View Engine库会生成多格式产物（esm5/esm2015/umd），附带ngfactory.js/ngstyle.js等预编译工厂文件。
  Ivy库仅需输出标准ESM格式产物，无需预编译工厂文件，依赖应用侧的Ivy编译器完成最终编译。
• 依赖配置
  View Engine库的peerDependencies必须包含@angular/compiler，且Angular版本范围需严格匹配。
  Ivy库的peerDependencies仅需声明@angular/core/@angular/common等核心包，无需依赖编译器，版本范围可放宽至支持Ivy的Angular 12+。

自定义库适配Ivy步骤 #

1. 升级Angular版本
   将库的开发依赖升级至Angular 12+（Angular 16已完全移除ngcc，建议直接升级到16以匹配你的应用环境）。
2. 调整编译配置
   修改tsconfig.lib.json的angularCompilerOptions：

   {
     "angularCompilerOptions": {
       "enableIvy": true,
       "compilationMode": "partial",
       "skipTemplateCodegen": false,
       "strictMetadataEmit": false
     }
   }
   

3. 清理遗留产物
   删除库输出目录中View Engine相关的metadata.json、ngfactory.js、ngstyle.js文件，确保只保留Ivy编译后的ESM文件。
4. 优化package.json配置
   • 添加"sideEffects": false（无副作用的库适用），提升Tree Shaking效率。
   • 使用exports字段明确指定ESM入口，替代旧的main/module字段：

     "exports": {
       ".": {
         "types": "./index.d.ts",
         "esm2022": "./esm2022/index.js"
       }
     }
     

5. 修复代码兼容性问题
   检查并修改不符合Ivy要求的代码：
   • 将@NgModule的declarations/imports/exports中动态生成的数组改为静态定义（比如用const提前声明数组再引用）。
   • 确保所有组件/指令都正确添加了对应的装饰器，没有遗漏@Component/@Directive等。
6. 验证适配效果
   在Angular 16应用中导入库，若仍出现“不属于NgModule类”报错，需检查：
   • 库是否确实用Ivy编译（查看产物JS文件是否包含ɵmod标识）。
   • @NgModule装饰器是否正确应用，参数是否完整（比如declarations中的组件是否都在库内定义，无外部未导出的依赖）。

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