我正试图用webpack 3和angular 5构建aot，但网上有很多教程，没有一个能毫无疑问地展示完整的示例，到目前为止，我得到了以下配置：(对于那些对路径有疑问的人——我在java应用程序中使用它)
webpack.config.aot.js:
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const ngToolsWebpack = require('@ngtools/webpack');
module.exports = {
context: __dirname + "/src/main/webapp/resources/script/",
entry: {
app: "./core/main.aot.ts",
vendor: "./vendor.ts",
polyfills: "./polyfills.ts"
},
output: {
filename: 'js/[name].js',
chunkFilename: "js/chunks/[id].chunk.js",
publicPath: "resources/compiled/",
path: __dirname + '/src/main/webapp/resources/compiled'
},
resolve: {
alias: {
STYLES: __dirname + "/src/main/webapp/resources/css/",
SCRIPT: __dirname + "/src/main/webapp/script/"
},
extensions: [".js", ".json", ".scss", ".ts"]
},
module: {
rules: [
{
test: /[/]angular.js$/,
loader: 'exports-loader?angular'
},
{
test: /.html$/,
loader: 'raw-loader'
},
{
test: /(?:.ngfactory.js|.ngstyle.js|.ts)$/,
loader: '@ngtools/webpack'
}
]
},
plugins: [
new ngToolsWebpack.AngularCompilerPlugin({
tsConfigPath: './tsconfig.aot.json',
entryModule: './src/main/webapp/resources/script/core/i18n/app.module.en#AppModule'
})
]
};
tsconfig.aot.json:
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true,
"mapRoot": "",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es2015",
"dom"
],
"outDir": "lib",
"skipLibCheck": true,
"rootDir": "."
},
"exclude": [
"node_modules/*",
"target/*"
],
"angularCompilerOptions": {
"genDir": "./src/main/webapp/resources/script/factory",
"rootDir": ".",
"baseUrl": "/"
}
}
main.aot.ts:
import {platformBrowser} from '@angular/platform-browser';
import {enableProdMode} from "@angular/core";
import {AppModuleNgFactory} from '../factory/app/app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
文件结构(简化)：
- webpack.config.aot.js
- tsconfig.aot.js
- src/
- main/
- webapp/
- resources/
- script/
- vendor.ts
- polyfills.ts
- core/
- main.aot.ts
- i18n/
- app.module.en.ts
(如果我没有展示相关内容，请告诉我)
所以当我尝试使用webpack -p --config ./webpack.config.aot.js构建它时
我得到以下错误：
ERROR in src/main/webapp/resources/script/core/main.aot.ts(5,34): error TS2307: Cannot find module '../factory/app/app.module.ngfactory'.
这听起来很合法，因为那里没有AppModuleNgFactory，但正如我在教程中看到的，它应该是在aot构建时生成的，使用genDir，我说得对吗？(请不要说，如果我省略了应用程序/文件夹，所以路径看起来是"../factory/app.module.nfactory"，我会得到同样的错误)
使用@ngtools/webpack指向aot构建上不存在的AppModuleNgFactory是否正确
那个AppModuleNgFactory是什么？在有角度的站点上几乎没有任何关于它的文档
我应该在配置中更改什么才能成功生成aot构建
如果我将主文件更改为引导AppModule本身，它会成功构建，但在浏览器中我会收到NullInjectorError: No provider for t!错误
未缩小显示：No provider for CompilerFactory!
@ngtools/webpack似乎可以从原始主文件中处理引导模块工厂本身，例如webpack条目应该是：path_to_file/main.ts
和main.ts包含：
platformBrowserDynamic().bootstrapModule(AppModule);
整个事情将自行处理，不需要额外的配置！
真的很神奇
我认为接受的答案不正确。我也有同样的问题，我的问题有两个原因：
我不得不在tsconfig:中的includes中包含该模块
"include": [
"ng/src/main/app.module.ts",
"ng/src/main.aot.ts"
]
我在main.aot.ts中的include只是引用了源文件，但带有ngfactory后缀：
import { MainModuleNgFactory } from './main/app.module.ngfactory';