我有一个Angular应用程序，我经常使用最新的Webpack打包工具进行更新和构建。几天前，我将该项目升级到Angular 9，并遇到了一些无法解决的问题。
- npm run build:prod
错误 TS2307：找不到模块“'./app/app.module.ngfactory'”。
我认为这是由于webpack配置中的某个部分引起的，因为在Angular 9中模块导入已更改。但是，我并不完全确定。
plugins: [
new ngw.AngularCompilerPlugin({
tsConfigPath: path.resolve(rootPath, 'tsconfig.aot.json'),
entryModule: path.resolve(rootPath, 'src', 'app', 'app.module#AppModule')
})
]
- npm run test
找不到文件: ./node_modules/jest-preset-angular/InlineHtmlStripStylesTransformer (解析为: .../angular-webpack-build/node_modules/jest-preset-angular/InlineHtmlStripStylesTransformer)
这个错误对我来说有些神秘。我看了一些关于类似问题的帖子，但那些建议并没有起作用。
以下是我的配置文件，整个项目都在GitHub上可用：https://github.com/aszidien/angular-webpack-build
package.json
...
"scripts": {
"build:dev": "cross-env NODE_ENV=development webpack --mode development",
"build:prod": "cross-env NODE_ENV=production webpack --mode production",
"test": "jest"
}
...
tsconfig.aot.json
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"skipMetadataEmit": true
}
}
webpack.config.common.js
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.config.common');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
publicPath: '/',
filename: 'bundle.js',
chunkFilename: '[id].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader', options: {
transpileOnly: true
}
},
{ loader: 'angular2-template-loader' },
{ loader: 'angular-router-loader' }
]
}
]
},
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
webpack.config.prod.js
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.config.common');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
publicPath: '/',
filename: 'bundle.js',
chunkFilename: '[id].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader', options: {
transpileOnly: true
}
},
{ loader: 'angular2-template-loader' },
{ loader: 'angular-router-loader' }
]
}
]
},
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});