title: Angular 8 webpack AOT build failed - Cannot read property 'map' of undefined
body: <p><a href="https://i.stack.imgur.com/eyRAP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eyRAP.png" alt="enter image description here" /></a></p>
  <p>error message is html-webpack-plugin error</p>
  <p>this error comes up only when bundling for production</p>
  <p>application bundles correctly when @ngtools/webpack is replaced with angular-router-loader, angular2-template-loader and awesome-typescript-loader</p>
  <h1>environment</h1>
  <p>Angular 8,
  webpack 4,
  html-webpack-plugin 3.2.0,
  typescript: 3.7.5</p>
  <h1>code</h1>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require("path")
  const webpack = require("webpack")
  const HtmlWebpackPlugin = require("html-webpack-plugin")
  const MiniCssExtractPlugin = require("mini-css-extract-plugin")
  const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin")
  const UglifyJSPlugin = require("uglifyjs-webpack-plugin")
  const CompressionPlugin = require("compression-webpack-plugin")
  const BrotliPlugin = require("brotli-webpack-plugin")
  const AngularCompilerPlugin = require("@ngtools/webpack").AngularCompilerPlugin
  const { CleanWebpackPlugin } = require("clean-webpack-plugin") 
  
  const isProd = process.env.NODE_ENV === "production"
  
  module.exports = {
      entry: {
          polyfills: './src/polyfills',
          vendor: './src/vendor',
          main: ["./src/main.prod"]
      },
      resolve: {
          extensions: [".js", ".ts", ".json"]
      },
      mode: "production",
      output: {
          filename: "[name]-bundle.js",
          path: path.resolve(__dirname, "../dist"),
          publicPath: "/",
          chunkFilename: "[id].chunk.js",
      },
      optimization: {
          noEmitOnErrors: true,
          splitChunks: {
              chunks: 'all'
          },
          runtimeChunk: 'single'
      },
      devtool: 'source-map',
      module: {
          rules: [            
              {
                  test:  /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                  loader: "@ngtools/webpack", 
                  // use: [
                  //     {
                  //         loader: "@ngtools/webpack"
                  //     }
                  // ],
                  exclude: /node_modules/
              },
              {
                  test: /\.html$/,
                  use: [
                      { 
                          loader: "html-loader",
                          options: {
                              attrs: ["img:src", "link:href"]
                          } 
                      }
                  ]
              },
              {
                  test: /\.css$/,
                  use: [
                      { loader: "to-string-loader" },
                      { loader: MiniCssExtractPlugin.loader },
                      { 
                          loader: "css-loader"
                      }
                  ],
                  exclude: /\.component\.css$/
              },
              {
                  test: /\.css$/,
                  use: [
                      { loader: "to-string-loader" },
                      { loader: MiniCssExtractPlugin.loader },
                      { 
                          loader: "css-loader"
                      }
                  ],
                  include: /\.component\.css$/
              },
              {
                  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/,
                  use: [
                      { 
                          loader: "file-loader",
                          options: {
                              name: "assets/images/[name].[ext]"
                          } 
                      }
                  ]
              },
              {
                  test: /\.(ico)$/,
                  use: [
                      { 
                          loader: "file-loader",
                          options: {
                              name: "[name].[ext]"
                          } 
                      }
                  ]
              },
          ]
      },
      plugins: [
          new OptimizeCssAssetsPlugin({
              cssProcessor: "cssnano",
              cssProcessorOptions: {
                  discardComments: {
                      removeAll: true
                  }
              },
              canPrint: false
          }),
          new MiniCssExtractPlugin({
              filename: "[name]-[contenthash].css"
          }),
          new webpack.ContextReplacementPlugin(
              /angular(\\|\/)core/,
              path.join(__dirname, "./src"),
              {}
          ),
          new HtmlWebpackPlugin({
              template: 'src/index.html'
          }),
          new webpack.NoEmitOnErrorsPlugin(),
          new webpack.DefinePlugin({
              'process.env': {
                  NODE_ENV: JSON.stringify("production")
              }
          }),
          new UglifyJSPlugin({
              cache: true,
              parallel: true
          }),
          new CompressionPlugin({
              algorithm: "gzip"
          }),
          new BrotliPlugin(),
          new CleanWebpackPlugin(), 
          new AngularCompilerPlugin({
              tsConfigPath: './tsconfig.prod.json',
              entryModule: path.join(__dirname, "src/app/app.module#AppModule")
          })
      ]
  }</code></pre>
  </div>
  </div>
  </p>
  <h1>package.json file</h1>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"dependencies": {
      "@angular/animations": "~8.2.0",
      "@angular/common": "~8.2.0",
      "@angular/compiler": "~8.2.0",
      "@angular/core": "^8.2.14",
      "@angular/forms": "^8.2.14",
      "@angular/http": "^7.2.16",
      "@angular/platform-browser": "^8.2.14",
      "@angular/platform-browser-dynamic": "^8.2.14",
      "@angular/router": "^8.2.14",
      "@babel/core": "^7.8.4",
      "@fortawesome/fontawesome-free": "^5.12.0",
      "@types/lodash": "^4.14.149",
      "angular2-jwt": "^0.2.3",
      "babel-core": "^6.26.3",
      "bootstrap": "^4.4.1",
      "classlist.js": "^1.1.20150312",
      "core-js": "^3.6.4",
      "font-awesome": "^4.7.0",
      "jquery": "^3.4.1",
      "moment": "^2.24.0",
      "ngx-bootstrap": "^5.3.2",
      "ngx-color-picker": "^8.2.0",
      "ngx-quill": "^7.3.12",
      "ngx-toasta": "^1.0.3",
      "popper": "^1.0.1",
      "popper.js": "^1.16.0",
      "quill": "^1.3.7",
      "run": "^1.4.0",
      "rxjs": "~6.4.0",
      "rxjs-compat": "^6.5.4",
      "start": "^5.1.0",
      "tslib": "^1.10.0",
      "web-animations-js": "^2.3.2",
      "zone.js": "~0.9.1"
    },
    "devDependencies": {
      "@angular/compiler-cli": "^9.0.2",
      "@angular/language-service": "^8.2.14",
      "@ngtools/webpack": "^9.1.0-next.0",
      "@types/jasmine": "~3.3.8",
      "@types/jasminewd2": "^2.0.8",
      "@types/node": "^13.7.4",
      "angular-router-loader": "^0.8.5",
      "angular2-template-loader": "^0.6.2",
      "awesome-typescript-loader": "^5.2.1",
      "babel-loader": "^8.0.6",
      "babel-polyfill": "^6.26.0",
      "babel-preset-env": "^1.7.0",
      "brotli-webpack-plugin": "^1.1.0",
      "clean-webpack-plugin": "^3.0.0",
      "codelyzer": "^5.2.1",
      "compression-webpack-plugin": "^3.1.0",
      "css-loader": "^3.4.2",
      "file-loader": "^5.0.2",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "jasmine-core": "~3.4.0",
      "jasmine-spec-reporter": "~4.2.1",
      "json-loader": "^0.5.7",
      "karma": "~4.1.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~2.0.1",
      "karma-jasmine-html-reporter": "^1.5.1",
      "mini-css-extract-plugin": "^0.9.0",
      "optimize-css-assets-webpack-plugin": "^5.0.3",
      "protractor": "~5.4.0",
      "style-loader": "^1.1.3",
      "to-string-loader": "^1.1.6",
      "ts-node": "~7.0.0",
      "tslint": "~5.15.0",
      "typescript": "~3.7.5",
      "uglifyjs-webpack-plugin": "^2.2.0",
      "url-loader": "^3.0.0",
      "webpack": "^4.41.6",
      "webpack-bundle-analyzer": "^3.6.0",
      "webpack-cli": "^3.3.11",
      "webpack-dev-server": "^3.10.3"
    }</code></pre>
  </div>
  </div>
  </p>