Angular 5 webpack 3 aot

Question

我正在嘗試使用webpack 3和angular 5進行構建，但網上有很多教程，沒有顯示完整的示例沒有問題，到目前為止，我有以下配置:(對於那些有疑問的人路徑 - 我在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，但正如我在教程中看到它應該是在構建時使用genDir生成的，我是對的嗎？ （請注意，如果我省略app /文件夾，那么路徑看起來'../factory/app.module.ngfactory'我得到同樣的錯誤）

是否使用@ ngtools / webpack指向aot構建中不存在的AppModuleNgFactory？

什么是AppModuleNgFactory？ 在角度站點上幾乎沒有關於它的任何文檔的文檔

我應該在配置中更改什么才能成功生成構建？

如果我將主文件更改為引導AppModule本身，它會成功構建，但在瀏覽器中我得到NullInjectorError: No provider for t! 錯誤

沒有縮小它顯示： No provider for CompilerFactory!

Answer 1

似乎@ ngtools / webpack可以從原始主文件處理bootstraping模塊工廠本身，例如webpack條目應該是： path_to_file/main.ts

和main.ts包含：

platformBrowserDynamic().bootstrapModule(AppModule);

整個事情將自己處理，沒有額外的配置！

這太棒了

Answer 2

我不認為接受的答案是正確的。 我有同樣的問題，我的問題有兩個原因：

我必須在tsconfig中包含我的包含模塊：

"include": [
  "ng/src/main/app.module.ts",
  "ng/src/main.aot.ts"
]

我在main.aot.ts中的main.aot.ts只引用了源文件但是帶有ngfactory后綴：

import { MainModuleNgFactory } from './main/app.module.ngfactory';