【发布时间】：2020-06-09 08:42:58
【问题描述】：
错误信息是 html-webpack-plugin 错误
此错误仅在捆绑生产时出现
当@ngtools/webpack 被 angular-router-loader、angular2-template-loader 和 awesome-typescript-loader 替换时，应用程序会正确打包
环境
角度 8， 网络包 4, html-webpack-plugin 3.2.0, 打字稿：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")
})
]
}package.json 文件
"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"
}【问题讨论】：
-
您是否尝试在 html 中使用
.map(...)？ -
@Z.Bagley 地图与数组示例 array.map(x => {}) 一起使用，贯穿整个项目
-
我的意思是在你的实际 html 模板中，而不是打字稿。如果您正在尝试 AOT 构建，您将需要重构在您的 html 中使用的大多数第三方方法，并通过您的 ts 组件中的代理方法将它们放置。示例：
*ngIf="color.map(x=>x.red)"到*ngIf="mappedColor(color)"和mappedColor(color: Color){ return color.map(x=>x.red)} -
不，地图没有在任何html文件中使用，只在ts文件中
-
您可能有一个
new CustomClass被声明为没有()。在您的项目中搜索new，并确保它们都以new CustomClass()声明。此外，如果您还没有尝试查找其他错误，则可以尝试使用--verbose标志运行它。以下是 AOT 编译限制的链接，您需要确保遵循：angular.io/guide/aot-compiler#expression-syntax-limitations
标签： angular webpack html-webpack-plugin aot