我正在使用@ngtools/webpack作为Angular CLI来向我的Angular 5应用添加AOT编译。对于任何人来说都不足为奇，它对我来说已经long journey。
我已经使AOT在3种环境（本地主机，开发和暂存）中工作。或者，当然，昨天部署到生产环境后，我发现我的Webpack构建崩溃了。
尽管我确实确定问题的根源是@ngtools/webpack.AngularCompilerPlugin，但我无法获得有意义的错误消息。
我的错误消息有数百条：
UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: #): TypeError: Cannot read property 'request' of undefined
在AOT Plugin的{{1}}步骤发出数百个UnhandledPromiseRejectionWarnings之后，它将继续构建node_module代码，然后无法创建Webpack输出：
dist我已经研究了一段时间，我发现了一些我认为可能相关的Web链接，尝试了许多修复程序，尤其是this article，但运气不佳。这是我认为可能相关但没有帮助的其他几篇文章：
这是我的Webpack.config.js：
> tsl-frontend@0.1.0 build-production /app
> webpack --mode production -p --progress --colors --env.env production
env configuration production
***AOT Compilation***
WebpackDelPlugin::Successfully deleted /app/dist/*.* assets.
[91m 0% compiling[0m[91m[0m[91m 10% building modules 0/1 modules 1 active multi babel-polyfill ./src/main.ts[0m[91m 10% building modules 1/1 modules 0 active[0m[91m(node:15) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
[0m[91m(node:15) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
[0m[91m(node:15) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'request' of undefined
(node:15) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Cannot read property 'request' of undefined
[0m[91m(node:15) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): TypeError: Cannot read property 'request' of undefined
(node:15) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 4): TypeError: Cannot read property 'request' of undefined
(node:15) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 5): TypeError: Cannot read property 'request' of undefined
///----removed for brevity
(node:15) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 202): TypeError: Cannot read property 'request' of undefined
[0m[91m 10% building modules 1/2 modules 1 active ?ode_modules/babel-polyfill/lib/index.js
//removed for brevity
70% building modules 2087/2087 modules 0 active[0mRemoving intermediate container b082f2548cbe
---> 098c4df274ad
Step 14/17 : RUN cd /app && cp -a dist/* /usr/share/nginx/html
---> Running in e179a7482da7
[91mcp: cannot stat 'dist/*': No such file or directory
[0mRemoving intermediate container e179a7482da7
Service 'frontendproduction' failed to build: The command '/bin/sh -c cd /app && cp -a dist/* /usr/share/nginx/html' returned a non-zero code: 1
这是我的package.json：
var merge = require('webpack-merge'),
htmlPlugin = require('html-webpack-plugin'),
revPlugin = require('webpack-rev-replace-plugin'),
config = require('./build.config.json'),
path = require('path'),
extendedDefinePlugin = require('extended-define-webpack-plugin'),
webpackDelPlugin = require('webpack-del-plugin'),
openBrowserPlugin = require('open-browser-webpack-plugin'),
uglifyJSPlugin = require('uglifyjs-webpack-plugin');
const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
//import {AngularCompilerPlugin} from '@ngtools/webpack';
//Note : in package.json the last variable (dev) is the param delivered to this function { env: 'dev' }.
module.exports = function (env) {
console.log('env configuration', env.env);
/**
* configPerTarget is merged with build.config.json based on the env passed
* currently no configuration properties, this configPerTarget not in use per se, keeping just in case - Ogden 4-12-2018
*/
var configPerTarget = {
localhost: {
},
development: {
},
test: {
},
staging: {
},
production: {
},
maintenance: {
}
};
// Note : '__dirname' is the root file path.
const ROOT_DIR = path.resolve(__dirname);
const DIST_DIR = path.join(ROOT_DIR, config.dist);
// If no env make it dev
if (!env) {
env = {};
env.env = config.envDevelopment;
}
//merge config with env specific configPerTarget
config = merge(config, configPerTarget[env.env]);
// this takes path variables from build.config.json and builds it with given env
var appConfigPath = config.envs + config.appConfig.replace('{env}', env.env);
var webPackConfig = {
entry: ['babel-polyfill', config.src + config.entry],//main.ts
output: {
path: path.resolve(__dirname, config.dist),
filename: config.buildjs,
sourceMapFilename: config.buildjsmap,
chunkFilename: config.buildchunk
},
module: {
rules: [
{ test: /\.html$/, use: 'raw-loader' },
{ test: /\.css$/, use: 'raw-loader' },
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
//For images.
{ test: /\.(jpe?g|png|gif|svg)$/i, loader: 'file-loader?name=app/assets/images/[name].[ext]' },
{
test: /\.(ttf|eot|woff|woff2)$/,
loader: 'file-loader'
},
]
},
//https://webpack.js.org/configuration/devtool/
//Webpack 4.4 has its own mode development and production, which are environment modes
//do Webpack 4.4 is handling the devtool sourcemap config where in the past it was not
//looks like we no longer have to worry about setting devtool
//https://github.com/damianobarbati/yarsk/blob/50b6f352a13ec2e778fa8b252f915550b6132964/config/webpack.config.js#L110
//devtool: config.devtool,
resolve: {
modules: [__dirname + path.sep + 'src', __dirname, 'node_modules'],
extensions: ['.js', '.ts', '.scss', '.css', '.html']
},
plugins: [
new htmlPlugin({
template: config.src + config.index
}),
new revPlugin({
cwd: config.src,
files: '**/*.html',
outputPageName: function (filename) {
return filename;
},
modifyReved: function (filename) {
return filename.replace(/(\/style\/|\/script\/)/, '')
}
}),
//Makes AppConfig variable available in the application code.
new extendedDefinePlugin({
AppConfig: require(appConfigPath)
}),
//Usefull if you need remove some files or folders before compilation processes.
//currently not used (no dist file).
new webpackDelPlugin({ match: path.join(DIST_DIR, '*.*') }),
//opens browser after compilation.
new openBrowserPlugin({ url: 'http://localhost:8080' })
],
optimization: {
minimizer: [
new uglifyJSPlugin({
uglifyOptions: {
output: {
comments: false,
ascii_only: true //must be on to fix this issue https://github.com/angular/angular/issues/19475
}
}
})
]
}
}
if (env.env === config.envLocalhost) {
webPackConfig.module.rules.push(
{
test: /\.ts$/,
loaders: [
'ts-loader',
'angular2-template-loader',
'angular-router-loader']
}
);
return webPackConfig;
}
//********************************AOT Compilation*************************************** */
//-- AOT Compilation from this point on, currently AOT runs in all environments
//this seems helpful because you get to see AOT build errors before pushing to build server
//the downside might be more mangled code and harder to debug source code...
console.log('***AOT Compilation***');
webPackConfig.module.rules.push(
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
loaders: ['@ngtools/webpack']
}
);
webPackConfig.plugins.push(new AotPlugin({
tsConfigPath: './tsconfig-aot.json',
entryModule: path.join(config.src, 'app/app.module#AppModule'),
sourceMap: true
}));
return webPackConfig;
}
答案 0 :(得分：0)
我确实相信此错误是由于我为项目安装了两个版本的Webpack引起的。从角度来看，该错误是在一种环境而不是其他环境中发生的，这是有道理的。也许npm依赖关系树有所不同，并且出于某些原因使用了旧版本的Webpack。
有一个npm软件包：<canvas id="my_canvas1" width="170" height="170" style="border:1px dashed #CCC;"></canvas>
<canvas id="my_canvas2" width="170" height="170" style="border:1px dashed #CCC;"></canvas>，它具有Webpack v1.5依赖性。我正在使用Webpack v4.16。一旦我删除了webpack-rev-replace-plugin并因此删除了旧版本的Webpack，我就开始遇到与webpack-rev-replace-plugin相关的其他错误，一旦我删除了uglifyjs-webpack-plugin并仅使用了Webpacks默认值以进行缩小等，一切都很好。