Angular 9 production build with webpack

Question

I have an Angular application that I regularly update and build with the latest Webpack bundler.
Some days ago I upgraded the project to Angular 9 and encountered some issues that I couldn't resolve.

npm run build:prod
error TS2307: Cannot find module './app/app.module.ngfactory'.
I think it's casued by this part of webpack config because module import is changed in Angular 9. However, I'm not absolutely sure about it.

  plugins: [
    new ngw.AngularCompilerPlugin({
      tsConfigPath: path.resolve(rootPath, 'tsconfig.aot.json'),
      entryModule: path.resolve(rootPath, 'src', 'app', 'app.module#AppModule')
    })
  ]

npm run test
File not found: ./node_modules/jest-preset-angular/InlineHtmlStripStylesTransformer (resolved as: .../angular-webpack-build/node_modules/jest-preset-angular/InlineHtmlStripStylesTransformer)
This error is a bit mysterious to me. I've read some posts about similar issues, but those advices didn't work.

Below you can find my configuration files, but the whole project is available on GitHub: https://github.com/aszidien/angular-webpack-build

package.json

...
  "scripts": {
    "build:dev": "cross-env NODE_ENV=development webpack --mode development",
    "build:prod": "cross-env NODE_ENV=production webpack --mode production",
    "test": "jest"
  }
...

tsconfig.aot.json

{
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "skipMetadataEmit": true
  }
}

webpack.config.common.js

const webpackMerge = require('webpack-merge');

const commonConfig = require('./webpack.config.common');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',
  output: {
    publicPath: '/',
    filename: 'bundle.js',
    chunkFilename: '[id].chunk.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'awesome-typescript-loader', options: {
              transpileOnly: true
            }
          },
          { loader: 'angular2-template-loader' },
          { loader: 'angular-router-loader' }
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }
});

webpack.config.prod.js

const webpackMerge = require('webpack-merge');

const commonConfig = require('./webpack.config.common');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',
  output: {
    publicPath: '/',
    filename: 'bundle.js',
    chunkFilename: '[id].chunk.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'awesome-typescript-loader', options: {
              transpileOnly: true
            }
          },
          { loader: 'angular2-template-loader' },
          { loader: 'angular-router-loader' }
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }
});

Caro Caro · Accepted Answer · 2020-02-18T09:09:07

in Angular 9 with Ivy, there are no ngfactory files anymore, you should remove the main-aot.ts file

Angular 9 production build with webpack

2 Answers