wake-up-neo.com

Angular 5 webpack 3 aot

Ich versuche, aot build mit webpack 3 und angle 5 zu erstellen, aber es gibt so viele Tutorials im Netz und keines zeigt ein komplettes Beispiel ohne Fragen. Bisher habe ich die folgende Konfiguration: habe Fragen zu Pfaden - ich verwende es in der Java-App)

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);

Dateistruktur (vereinfacht):

- 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

(Bitte lass es mich wissen, wenn ich nichts relevantes gezeigt habe)

Wenn ich also versuche, es mit webpack -p --config ./webpack.config.aot.js zu bauen

Ich erhalte folgende Fehlermeldung: 

ERROR in src/main/webapp/resources/script/core/main.aot.ts(5,34): error TS2307: Cannot find module '../factory/app/app.module.ngfactory'.

Welches klingt ziemlich legitim, da es dort keine AppModuleNgFactory gibt, aber wie ich in den Tutorials nachgesehen habe, sollte es beim Generieren mit aD Build erstellt werden. (bitte nicht, wenn ich app/ordner weglasse, so dass der Pfad '../factory/app.module.ngfactory' aussieht, bekomme ich den gleichen Fehler)

Ist es richtig, auf die nicht vorhandene AppModuleNgFactory auf dem aot mit @ ngtools/webpack zu verweisen?

Was ist das AppModuleNgFactory? Es gibt wenig oder gar keine Dokumentation darüber auf der eckigen Seite

Was muss ich in meiner Konfiguration ändern, um aot build erfolgreich zu erstellen?

Wenn ich die Hauptdatei in Bootstrap AppModule selbst ändere, wird sie erfolgreich erstellt, aber im Browser erhalte ich NullInjectorError: No provider for t!-Fehler

Ohne Minifizierung zeigt es: No provider for CompilerFactory!

10
Dmytro Grynets

Es scheint, dass @ ngtools/webpack die Bootstraping-Modul-Factory von der ursprünglichen Hauptdatei aus handhaben könnte, z. B. sollte der Webpack-Eintrag Folgendes sein: path_to_file/main.ts

und main.ts enthält:

platformBrowserDynamic().bootstrapModule(AppModule);

Und das Ganze wird selbst erledigt, keine zusätzlichen Konfigurationen!

Es ist wirklich erstaunlich 

2
Dmytro Grynets