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.

1. 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')
    })
  ]

2. 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'
  }
});

Answer 1

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