这篇文章有点长，我试图将所有可能相关的内容包括在内。我的环境是带有Angular 5和webpack的.Net Core 2.0。
我的应用程序正在完善开发及其所有内容。我没有问题或任何错误。但是，当我发布我的应用程序（生产版本）时，我从角度获得错误。
我在延迟加载时遇到错误。
我认为我的生产配置中有一些东西，或者由于库而发生了一些奇怪的事情。
我在最后写了错误和部分，我还包括了每个配置文件。
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: ['.js', '.ts'] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: isDevBuild ? /\.ts$/ : /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
{ test: /\.(ts|js)$/, use: 'angular-router-loader' },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
{ test: /\.scss$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize', 'sass-loader'] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
//new webpack.optimize.UglifyJsPlugin(),
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.module#AppModule')
})
])
});
return [clientBundleConfig];
};
webpack.config.vendor.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableModules = [
'@angular/animations',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'zone.js'
];
const nonTreeShakableModules = [
'bootstrap',
'core-js/client/shim',
'web-animations-js',
'event-source-polyfill',
'jquery',
'@swimlane/ngx-datatable/release/assets/icons.css',
'ng2-toasty',
'ng2-toasty/bundles/style-bootstrap.css',
'ng2-charts',
'ngx-bootstrap/modal',
'ngx-bootstrap/tooltip',
'ngx-bootstrap/dropdown',
'bootstrap-toggle/css/bootstrap-toggle.css',
'bootstrap-toggle/js/bootstrap-toggle.js',
'bootstrap-select/dist/css/bootstrap-select.css',
'bootstrap-select/dist/js/bootstrap-select.js',
'bootstrap-datepicker/dist/css/bootstrap-datepicker3.css',
'font-awesome/css/font-awesome.css'
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);
module.exports = (env) => {
const extractCSS = new ExtractTextPlugin('vendor.css');
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
resolve: { extensions: ['.js'] },
module: {
rules: [
{ test: /\.(gif|png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
]
},
output: {
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]'
},
plugins: [
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
]
};
const clientBundleConfig = merge(sharedConfig, {
entry: {
// To keep development builds fast, include all vendor dependencies in the vendor bundle.
// But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
vendor: isDevBuild ? allModules : nonTreeShakableModules
},
output: { path: path.join(__dirname, 'wwwroot', 'dist') },
module: {
rules: [
{ test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
]
},
plugins: [
extractCSS,
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin()
])
});
return [clientBundleConfig];
}
tsconfig.json
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular.
"lib": [ "es6", "dom" ],
"types": [ "webpack-env" ]
},
"exclude": [ "bin", "node_modules" ],
"atom": { "rewriteTsconfig": false }
}
的package.json
{
"name": "sahatakip",
"version": "1.0.0",
"description": "",
"author": {
"name": "",
"email": "",
"url": ""
},
"license": "MIT",
"homepage": "",
"dependencies": {
"@angular/animations": "^5.1.0",
"@angular/common": "^5.1.0",
"@angular/compiler": "^5.1.0",
"@angular/compiler-cli": "^5.1.0",
"@angular/core": "^5.1.0",
"@angular/forms": "^5.1.0",
"@angular/platform-browser": "^5.1.0",
"@angular/platform-browser-dynamic": "^5.1.0",
"@angular/platform-server": "^5.1.0",
"@angular/router": "^5.1.0",
"@ngtools/webpack": "^1.9.0",
"@ngx-translate/core": "^9.0.1",
"@ngx-translate/http-loader": "^2.0.0",
"@swimlane/ngx-datatable": "^11.1.4",
"@types/jquery": "^3.2.16",
"@types/webpack-env": "^1.13.3",
"angular2-template-loader": "^0.6.2",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "^3.4.1",
"bootstrap": "^3.3.7",
"bootstrap-datepicker": "^1.7.1",
"bootstrap-select": "^1.12.4",
"bootstrap-toggle": "^2.2.2",
"chart.js": "^2.7.1",
"core-js": "^2.5.2",
"css": "^2.2.1",
"css-loader": "^0.28.7",
"event-source-polyfill": "^0.0.12",
"expose-loader": "^0.7.4",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"font-awesome": "^4.7.0",
"html-loader": "^0.5.1",
"jquery": "^3.2.1",
"json-loader": "^0.5.7",
"ng2-charts": "^1.6.0",
"ng2-toasty": "^4.0.3",
"ngx-bootstrap": "^2.0.0-beta.10",
"node-sass": "^4.7.2",
"popper.js": "^1.13.0",
"raw-loader": "^0.5.1",
"rxjs": "^5.5.5",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"to-string-loader": "^1.1.5",
"typescript": "^2.6.2",
"url-loader": "^0.6.2",
"web-animations-js": "^2.3.1",
"webpack": "^3.10.0",
"webpack-hot-middleware": "^2.21.0",
"webpack-merge": "^4.1.1",
"zone.js": "^0.8.18"
},
"devDependencies": {
"@types/chai": "^4.0.8",
"@types/jasmine": "^2.8.2",
"angular-router-loader": "^0.8.0",
"chai": "^4.1.2",
"jasmine-core": "^2.8.0",
"karma": "^1.7.1",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-webpack": "^2.0.6"
},
"scripts": {
"dev-build": "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js",
"test": "karma start ClientApp/test/karma.conf.js"
}
}
boot.browser.ts
import 'core-js/client/shim';
import 'web-animations-js';
import 'zone.js';
import 'bootstrap';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const rootElemTagName = 'app-root';
if (module.hot) {
module.hot.accept();
module.hot.dispose(() => {
//const oldRootElem = document.querySelector(rootElemTagName);
//const newRootElem = document.createElement(rootElemTagName);
//oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
platform.then(appModule => appModule.destroy());
});
} else {
enableProdMode();
}
// Boot the application, either now or when the DOM content is loaded
let platform = platformBrowserDynamic().bootstrapModule(AppModule);
platform.then(() => { (<any>window).appBootstrap && (<any>window).appBootstrap(); })
路由示例：
{ path: '', loadChildren: './components/home/home.module#HomeModule' }
在使用以下命令构建之前，一切正常：
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
node node_modules/webpack/bin/webpack.js
但是当我使用生产构建如下：
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod
node node_modules/webpack/bin/webpack.js --env.prod
当我尝试导航这个已编译的内容时，它会抛出错误：
Error: Cannot find module './components/home/home.module.ngfactory'.
at vendor.js?v=_76xaipghoKW6rrUpx3wrzV0og1-XYyjex-gA5TYo6o:249
at ZoneDelegate.invoke (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41100)
at Object.onInvoke (vendor.js?v=_76xaipghoKW6rrUpx3wrzV0og1-XYyjex-gA5TYo6o:36)
at ZoneDelegate.invoke (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41099)
at Zone.run (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:40850)
at main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41581
at ZoneDelegate.invokeTask (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41133)
at Object.onInvokeTask (vendor.js?v=_76xaipghoKW6rrUpx3wrzV0og1-XYyjex-gA5TYo6o:36)
at ZoneDelegate.invokeTask (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41132)
at Zone.runTask (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:40900)
at vendor.js?v=_76xaipghoKW6rrUpx3wrzV0og1-XYyjex-gA5TYo6o:249
at ZoneDelegate.invoke (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41100)
at Object.onInvoke (vendor.js?v=_76xaipghoKW6rrUpx3wrzV0og1-XYyjex-gA5TYo6o:36)
at ZoneDelegate.invoke (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41099)
at Zone.run (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:40850)
at main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41581
at ZoneDelegate.invokeTask (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41133)
at Object.onInvokeTask (vendor.js?v=_76xaipghoKW6rrUpx3wrzV0og1-XYyjex-gA5TYo6o:36)
at ZoneDelegate.invokeTask (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41132)
at Zone.runTask (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:40900)
at resolvePromise (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41532)
at resolvePromise (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41503)
at main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41581
at ZoneDelegate.invokeTask (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41133)
at Object.onInvokeTask (vendor.js?v=_76xaipghoKW6rrUpx3wrzV0og1-XYyjex-gA5TYo6o:36)
at ZoneDelegate.invokeTask (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41132)
at Zone.runTask (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:40900)
at drainMicroTaskQueue (main-client.js?v=WzTp96NIkmPUksemtcBC-ufCfRmAt1uBd5ohqiM-yys:41310)
at <anonymous>