Angular 12 + webpack 5 AOT编译无法生成ngfactory文件问题咨询

问题1：是否可以使用AngularWebpackPlugin替代AngularCompilerPlugin？ #

可以，AngularCompilerPlugin在Angular 9+版本已经被官方废弃，Angular 12搭配webpack 5的场景下，@ngtools/webpack包提供的AngularWebpackPlugin是官方指定的替代方案，你当前的选型是正确的。

问题2：沿用Angular 8版本的main-aot.ts是否正确？ #

不正确。Angular 8是ViewEngine编译器时代的版本，从Angular 9开始默认启用Ivy编译器，Ivy模式下的AOT编译不会生成显式的.ngfactory文件，也不需要调用bootstrapModuleFactory方法启动应用。
即便是强制关闭Ivy使用ViewEngine，Angular 12的编译产物路径和导出规则也和Angular 8存在差异，原有写法已经过时。

问题3：如何获取ngfactory未生成的根源错误提示？ #

可以通过以下方式暴露被webpack过滤的编译错误：

• 先单独运行Angular官方编译器排查：执行npx ngc -p tsconfig-aot.json，ngc会输出完整的编译错误信息，不会被webpack的构建流程吞掉
• 修改tsconfig-aot.json的angularCompilerOptions配置：将skipMetadataEmit设为false，新增fullTemplateTypeCheck: true、strictTemplates: true开启全量模板类型检查
• webpack构建命令添加--verbose参数，同时将webpack配置的stats字段设为'error-details'，输出更详细的构建日志

问题4：需要执行哪些操作才能正常构建？ #

分两种场景处理：

场景1：使用默认Ivy编译器（推荐）

不需要生成ngfactory文件，直接调整以下配置即可：

1. 修改main-aot.ts内容：

import { platformBrowser } from "@angular/platform-browser";
import { enableProdMode } from "@angular/core";
import { AppModule } from "./app/app.module";

enableProdMode();

platformBrowser().bootstrapModule(AppModule);

2. 调整webpack-prod.js的AngularWebpackPlugin配置，显式开启AOT：

new AngularWebpackPlugin({
    tsconfig: './tsconfig-aot.json',
    aot: true // 必须添加，明确开启AOT编译
})

3. 移除tsconfig-aot.json中angularCompilerOptions的enableIvy配置（Angular 12默认开启，无需显式声明）

场景2：强制使用ViewEngine生成ngfactory文件

如果必须兼容旧逻辑要生成ngfactory，调整如下：

1. tsconfig-aot.json的angularCompilerOptions新增配置：

"enableIvy": false,
"generateNgFactory": true,
"skipMetadataEmit": false

2. AngularWebpackPlugin配置显式添加aot: true
3. 确认所有依赖的Angular相关包版本统一为12.2.x，@ngtools/webpack版本必须和Angular核心版本完全匹配，避免版本错配导致编译失败

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