Angular 5 webpack 3 aot

j'essaye de faire une construction aot avec webpack 3 et angular 5, mais il y a tellement de tutoriels sur le net et aucun ne montre d'exemple complet sans questions, jusqu'à présent j'ai la configuration suivante: (Pour ceux qui ont des questions sur les chemins - je l'utiliser dans l'application 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);

structure du fichier (simplifiée):

- 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

(S'il vous plaît faites - moi savoir si je n'ai pas montré quelque chose d'important)

alors quand j'essaie de le construire en utilisant webpack -p --config ./webpack.config.aot.js

j'obtiens l'erreur suivante:

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

ce qui semble assez légitime car il n'y a pas D'AppModuleNgFactory là-bas, mais comme j'ai regardé dans les tutoriels, il est supposé être généré sur aot build, en utilisant genDir, est-ce que j'ai raison? (s'il vous plaît pas que si je omettre app/ dossier, chemin des regards../usine/de l'application.module.ngfactory " je reçois le même message d'erreur)

Est-il droit de pointer vers le non-existant AppModuleNgFactory sur la construction aot avec @ngtools / webpack?

Qu'est-ce que C'est que AppModuleNgFactory? Il y a peu ou pas de documentation sur tout cela sur le site angulaire

Que dois-je changer dans ma configuration pour générer avec succès une construction aot?

si je change le fichier principal pour bootstrap AppModule lui-même, il construit avec succès, mais dans le navigateur je reçois NullInjectorError: No provider for t! erreur

Sans minification il affiche: No provider for CompilerFactory!

10
demandé sur Dmytro Grynets 2017-11-18 13:57:30

2 réponses

il semble que @ngtools / webpack pourrait gérer bootstraping module factory lui-même à partir du fichier principal original, par exemple l'entrée webpack devrait être : path_to_file/main.ts

et principal.ts contient:

platformBrowserDynamic().bootstrapModule(AppModule);

et tout sera géré par lui-même, pas de configuration supplémentaire!

C'est vraiment génial

1
répondu Dmytro Grynets 2017-11-24 08:53:39

Je ne pense pas que la réponse acceptée soit correcte. J'ai eu le même problème et il y avait deux raisons pour expliquer mon problème:

j'ai dû inclure le module dans mes inclusions dans tsconfig:

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

Ma inclure dans main.aot.ts juste référencé le fichier source, mais avec ngfactory suffixe:

import { MainModuleNgFactory } from './main/app.module.ngfactory';
-3
répondu Khurram Ali 2018-04-27 09:55:55