Angular 5 webpack 3 aot [英] Angular 5 webpack 3 aot

问题描述

我正在尝试使用 webpack 3 和 angular 5 进行 aot 构建，但是网上有很多教程，但没有一个没有问题地显示完整示例，到目前为止，我有以下配置:(对于那些对路径有疑问的人 - 我在 java 应用程序中使用它)

I'm trying to make an aot build with webpack 3 and angular 5, but there are so many tutorials on the net and none show complete example without questions, so far I've got the following configuration: (For those who have questions about paths - I use it in the java app)

webpack.config.aot.js:

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:

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:

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

(如果我没有展示相关内容，请告诉我)

(Please let me know if I haven't showed something relevant)

所以当我尝试使用 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，但正如我在教程中所看到的，它应该在 aot 构建时使用 genDir 生成，对吗?(请不要因为我省略了 app/文件夹，所以路径看起来像 '../factory/app.module.ngfactory' 我得到同样的错误)

Which sound pretty legitimate as there is no AppModuleNgFactory there, but as i looked in tutorials it is supposed to be generated upon aot build, using genDir, am I right? (please not that if i omit app/ folder, so path looks '../factory/app.module.ngfactory' i get the same error)

使用@ngtools/webpack 指向 aot 构建中不存在的 AppModuleNgFactory 是否正确?

AppModuleNgFactory 是什么?在 angular 站点上几乎没有关于它的任何文档

我应该在我的配置中更改什么才能成功生成 aot 构建?

如果我将主文件更改为引导 AppModule 本身，它会成功构建，但在浏览器中我得到 NullInjectorError: No provider for t! 错误

If I change main file to bootstrap AppModule itself, it builds successfully, but in browser i get NullInjectorError: No provider for t! error

没有缩小它显示:没有 CompilerFactory 的提供者！

推荐答案

看来@ngtools/webpack 可以从原始主文件中处理引导模块工厂本身，例如 webpack 条目应该是:path_to_file/main.ts

It appears that @ngtools/webpack could handle bootstraping module factory itself from original main file, eg webpack entry should be : path_to_file/main.ts

和 main.ts 包含:

and main.ts contains:

platformBrowserDynamic().bootstrapModule(AppModule);

整个事情都会自己处理，不需要额外的配置！

And whole thing will be handled itself, no additional configs!

真的很神奇

这篇关于Angular 5 webpack 3 aot的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！