Angular 5 Webpack 3 AOT [英] Angular 5 webpack 3 aot
问题描述
我正在尝试使用webpack 3和angular 5进行aot构建，但是网上有太多教程，没有一个完整的示例没有问题，到目前为止，我已经有了以下配置：
（对于那些对路径有疑问的人-我在Java应用程序中使用它）
I'm trying to make an aot build with webpack 3 and angular 5, but there are so many tutorials on the net and none show complete example without questions, so far I've got the following configuration: (For those who have questions about paths - I use it in the java app)
webpack.config.aot.js：
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：
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：
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，但是正如我在教程中所看到的那样是在生成ot时使用genDir生成的，对吗？ （请注意，如果我省略了app /文件夹，那么路径看起来像是'../factory/app.module.ngfactory'，我会得到相同的错误）
Which sound pretty legitimate as there is no AppModuleNgFactory there, but as i looked in tutorials it is supposed to be generated upon aot build, using genDir, am I right? (please not that if i omit app/ folder, so path looks '../factory/app.module.ngfactory' i get the same error)
用@ ngtools / webpack指向aot构建中不存在的AppModuleNgFactory是否正确？
那是什么AppModuleNgFactory？在角度站点上几乎没有关于它的任何文档
要成功生成aot构建，我应该在配置中进行哪些更改？
如果我将主文件更改为Bootstrap AppModule本身，则可以成功构建，但是在浏览器中我会得到 NullInjectorError：t的没有提供者！ 错误
If I change main file to bootstrap AppModule itself, it builds successfully, but in browser i get NullInjectorError: No provider for t! error
如果没有缩小，则显示：没有CompilerFactory的提供者！
Without minification it shows: No provider for CompilerFactory!
推荐答案
似乎@ ngtools / webpack可以处理原始主文件中的引导模块工厂本身，例如webpack条目应为： path_to_file / main.ts
It appears that @ngtools/webpack could handle bootstraping module factory itself from original main file, eg webpack entry should be : path_to_file/main.ts
main.ts包含：
and main.ts contains:
platformBrowserDynamic().bootstrapModule(AppModule);
整个过程将自行处理，无需其他配置！
And whole thing will be handled itself, no additional configs!
这真的很棒
这篇关于Angular 5 Webpack 3 AOT的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
