Search code examples
angularwebpackwebpack-5webpack-cli

@ngtools/webpack AngularWebpackPlugin error when going from Angular 12 to Angular 13


I have a large Angular 12 application that uses Webpack 5.55.1, not the Angular CLI. When I tried to upgrade from Angular 12.2.16 and @ngtools/webpack 12.0.5 to Angular 13.3.11 and @ngtools/webpack 13.3.9 I get a webpack-cli error as shown below when trying to compile in 'production' mode. The app compiles fine in 'development' mode since it doesn't use the AOT compiler. I have included the 'production' webpack config as well. Is there anything I'm missing?

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 production configuration (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'
                })
            ]
...


Solution

  • Updating to webpack 5.74.0 and webpack-cli 4.10.0 resolved the issue. The old versions were webpack 5.55.1 and webpack-cli 4.8.0.