Angular 8 webpack AOT 构建失败 - 无法读取未定义的属性“地图”

Question

error message is html-webpack-plugin error

this error comes up only when bundling for production

application bundles correctly when @ngtools/webpack is replaced with angular-router-loader, angular2-template-loader and awesome-typescript-loader

environment

Angular 8, webpack 4, html-webpack-plugin 3.2.0, typescript: 3.7.5

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") }) ] }

package.json file

 "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" }

Answer 1

In my case, an error very similar to this one was occurring, because I had declared the CopyWebpackPlugin as this:

new CopyWebpackPlugin([{
  patterns: [{
     ...
  }]
}])

Instead of this:

new CopyWebpackPlugin({
  patterns: [{
     ...
  }]
})

Those extra brackets were the problem.

Answer 2

I got a similar error when I migrated from webpack@3 to a new version. In my case, it was ERROR in Cannot read property 'name' of undefined while I was trying to run npm run build in my React project.

The problem was caused by webpack-parallel-uglify-plugin which is deprecated in webpack@4 configuration and used as a default in production mode. Here is the doc: https://webpack.js.org/migrate/4/#deprecatedremoved-plugins

The solution was to remove:

new ParallelUglifyPlugin({})

initialization from webpack.config.js

GL HF :)