web-dev-qa-db-fra.com

Web 5 angulaire 3 aot

J'essaie de créer un peu plus loin avec webpack 3 et angular 5, mais il y a tellement de tutoriels sur le net et aucun ne montre un exemple complet sans questions, à ce jour, j'ai la configuration suivante: vous avez des questions sur les chemins - je les utilise 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 de 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 laissez-moi savoir si je n'ai pas montré quelque chose de pertinent)

Donc, quand je cherche à le construire en utilisant webpack -p --config ./webpack.config.aot.js

Je reçois 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'.

Quel son est assez légitime puisqu'il n'y a pas d'AppModuleNgFactory, mais comme je l'ai regardé dans les tutoriels, il est censé être généré après la construction, en utilisant genDir, ai-je raison? (s'il vous plaît, pas si j'omets app/folder, donc path ressemble '../factory/app.module.ngfactory' j'obtiens la même erreur)

Est-il juste de pointer l'AppModuleNgFactory non existant sur la version ultérieure avec @ ngtools/webpack?

Qu'est-ce que c'est AppModuleNgFactory? Il y a peu ou pas de documentation à ce sujet sur le site angulaire

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

Si je modifie le fichier principal pour amorcer AppModule lui-même, il se construit correctement, mais dans le navigateur, l'erreur NullInjectorError: No provider for t! s'affiche

Sans minification, il montre: No provider for CompilerFactory!

angularwebpackangular5angular-aot
10
Dmytro Grynets

Il semble que @ ngtools/webpack puisse gérer l’usine de modules d’amorçage elle-même à partir du fichier principal original. Par exemple, l’entrée webpack devrait être: path_to_file/main.ts

et main.ts contient:

platformBrowserDynamic().bootstrapModule(AppModule);

Et tout sera traité lui-même, pas de configuration supplémentaire!

C'est vraiment incroyable 

2
Dmytro Grynets