@ngtools/webpack的AngularWebpackPlugin能否链接部分编译的Ivy库？Angular 12+Webpack5构建报错求助

问题核心 #

你遇到的报错完全是因为自定义Webpack配置中缺少了Angular Linker的处理步骤。Angular CLI会自动启用Linker来处理那些采用部分编译（Partial Compilation）发布的Ivy库，但手动配置Webpack+AngularWebpackPlugin时，这一步需要你手动添加——这也是你和CLI测试应用的关键差异点。

具体解决步骤 #

你需要在Webpack配置中添加Angular Linker的loader来处理第三方库的代码，具体操作如下：

1. 修改Webpack的module.rules配置
   在现有@ngtools/webpack的loader规则前，添加Linker的处理规则。Linker loader来自你已经安装的@angular-devkit/build-angular包：

   module.exports = {
     ...
     module: {
       rules: [
         // 新增Linker规则，先处理第三方库的部分编译代码
         {
           test: /\.(m?js|ts)$/,
           loader: '@angular-devkit/build-angular/src/webpack/loaders/linker-loader.js',
           options: {
             tsconfig: './tsconfig-aot.json',
           },
           enforce: 'pre',
           include: /node_modules/, // 只处理第三方库代码
         },
         // 原有的@ngtools/webpack规则
         {
           test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
           loader: '@ngtools/webpack'
         }
       ],
     },
     ...
   };
   

   这里的enforce: 'pre'确保Linker在其他loader之前执行，include: /node_modules/限定只处理第三方库（避免处理自己的业务代码）。

2. 验证配置并重新构建
   添加完规则后，清理之前的构建产物，重新执行生产构建。此时Linker会将第三方库的部分编译代码转换为Angular AOT可以识别的完整编译格式，不再需要 fallback到JIT编译。

对你的疑问的解答 #

• 是否遗漏了步骤？：是的，你遗漏了启用Angular Linker的配置，这是处理部分编译Ivy库的必需步骤。
• 是否需要特定插件？：需要使用Angular提供的Linker loader（来自@angular-devkit/build-angular），而非额外插件。
• Webpack+AngularWebpackPlugin构建生产环境是否可行？：完全可行！很多大型Angular项目因为定制化需求会采用这种方式，只是需要手动处理CLI自动封装的细节（比如Linker、优化规则等）。

额外注意事项 #

• 确保你的tsconfig-aot.json中启用了Ivy："angularCompilerOptions": { "enableIvy": true }（Angular 12默认已经启用，但最好确认）。
• 如果你后续升级Angular版本，注意Linker loader的路径可能会有变化（比如Angular 13+的路径略有不同，但12的路径如上述配置即可）。

内容的提问来源于stack exchange，提问作者D. Joe