Angular 8 Webpack AOT构建失败-无法读取未定义的属性"map" [英] Angular 8 webpack AOT build failed - Cannot read property 'map' of undefined

问题描述

错误消息是html-webpack-plugin错误

error message is html-webpack-plugin error

仅当捆绑生产时才会出现此错误

this error comes up only when bundling for production

在将@ ngtools/webpack替换为angular-router-loader，angular2-template-loader和awesome-typescript-loader时，应用程序正确捆绑

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

角度8，Webpack 4，html-webpack-plugin 3.2.0，打字稿:3.7.5

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

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

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

推荐答案

在我的情况下，发生了与此非常类似的错误，因为我已将CopyWebpackPlugin声明为:

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

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

代替此:

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

问题是那些多余的括号.

Those extra brackets were the problem.

这篇关于Angular 8 Webpack AOT构建失败-无法读取未定义的属性"map"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！