Angular 12升级至13时@ngtools/webpack生产模式编译报错

我有一个未使用Angular CLI、基于Webpack 5.55.1构建的大型Angular 12应用。将Angular从12.2.16、@ngtools/webpack从12.0.5升级至Angular 13.3.11、@ngtools/webpack 13.3.9后，生产模式编译时出现如下webpack-cli错误，开发模式因未使用AOT编译可正常构建。

错误信息 #

TypeError: Invalid host defined options
    at eval (eval at initializeCompilerCli (D:\myapp\node_modules\@ngtools\webpack\src\ivy\plugin.js:532:40), <anonymous>:3:1)
    at AngularWebpackPlugin.initializeCompilerCli (D:\myapp\node_modules\@ngtools\webpack\src\ivy\plugin.js:532:95)
    at D:\myapp\node_modules\@ngtools\webpack\src\ivy\plugin.js:128:73
    at Hook.eval [as callAsync] (eval at create (D:\myapp\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:8:17)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\myapp\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (D:\myapp\node_modules\webpack\lib\Compiler.js:1092:28)
    at D:\myapp\node_modules\webpack\lib\Compiler.js:517:12
    at Compiler.readRecords (D:\myapp\node_modules\webpack\lib\Compiler.js:929:11)
    at D:\myapp\node_modules\webpack\lib\Compiler.js:514:11
    at Hook.eval [as callAsync] (eval at create (D:\myapp\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)

Webpack生产配置（webpack.prod.js） #

const AngularWebpackPlugin = require('@ngtools/webpack').AngularWebpackPlugin;
...

module:
    {
        rules:
            [                                       
                {
                    test: /\.[cm]?js$/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                            compact: false,
                            plugins: ['@angular/compiler-cli/linker/babel'],
                            },
                        },
                    },
                {
                    test: /\.[jt]sx?$/,
                    loader: '@ngtools/webpack',
                    include: [path.resolve(__dirname, "app")],
                    exclude: [path.resolve(__dirname, "node_modules")]                
                }
            ]
        },
        plugins:
            [                    
                new AngularWebpackPlugin({
                        tsconfig: './tsconfig.json'
                })
            ]
...

这个错误源于Angular 13升级后@ngtools/webpack的配置要求变更，以下是需要补充的关键配置调整：

1. 完善AngularWebpackPlugin配置 #

Angular 13的插件需要明确指定应用主入口，同时显式声明AOT编译参数，修改插件配置：

new AngularWebpackPlugin({
    tsconfig: './tsconfig.json',
    main: './src/main.ts', // 替换为你的实际主入口文件路径
    compilerOptions: {
        enableIvy: true,
        aot: true
    }
})

2. 调整Babel Loader作用范围 #

Babel的Linker插件仅需处理node_modules中的第三方库，避免与@ngtools/webpack的TS编译规则冲突：

{
    test: /\.[cm]?js$/,
    use: {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true,
            compact: false,
            plugins: ['@angular/compiler-cli/linker/babel'],
        },
    },
    include: [path.resolve(__dirname, "node_modules")],
    exclude: [/node_modules\/(?:@angular|rxjs)/]
}

3. 检查tsconfig.json的AOT配置 #

确保tsconfig中启用Angular 13要求的编译选项：

{
    "compilerOptions": {
        "enableIvy": true,
        "aot": true,
        "strictTemplates": true
    },
    "angularCompilerOptions": {
        "enableIvy": true,
        "fullTemplateTypeCheck": true,
        "strictInjectionParameters": true
    }
}

4. 清理依赖缓存 #

升级后可能存在依赖版本冲突，执行以下命令重置依赖：

rm -rf node_modules package-lock.json
npm install

5. 验证依赖版本一致性 #

确保@angular/compiler-cli版本与Angular核心版本完全一致（13.3.11），避免版本不匹配导致的编译错误。

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