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!
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
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';