Question

我正在尝试使用@ngtools/webpack插件在webpack 2中创建我的Angular 4应用程序的AoT版本，但我很难理解这个插件产生的内容。

特别是，我的网络包中有一个main.aot.ts入口点，用于AoT，如下所示：

// main.aot.ts
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from '../compiled/src/app/app.module.ngfactory';
const platform = platformBrowser();

platform.bootstrapModuleFactory(AppModuleNgFactory);

我webpack.config.js的摘录如下：

if (envOptions.MODE === 'prod') {
    config.module.rules.push(
        {test: /\.ts$/, loader: '@ngtools/webpack'}
    );
    config.plugins.push(
        new AotPlugin({
            tsConfigPath: path.resolve(__dirname, './app/tsconfig.json'),
            entryModule: path.resolve(__dirname, './app/src/app.module#AppModule')
        }),
        new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: {
                screw_ie8: true,
                keep_fnames: true
            },
            compress: {
                warnings: false,
                screw_ie8: true
            },
            comments: false
        })
    );
}

此@ngtools/webpack插件是否以与ngc编译器相同的方式生成模块文件，以包含在main.aot.ts中？如果没有，它是如何工作的？网上没有太多这样的例子。

Answer 1

关于@ngtools/webpack的事情是它在内存中创建了那些.ngfactory文件。因此，无需任何main.aot.ts。

main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

if (process.env.ENV === 'production') {
    enableProdMode();
} 
platformBrowserDynamic().bootstrapModule(AppModule);

在你的webpack配置中：

var aotPlugin = new ngToolsWebpack.AotPlugin({
    tsConfigPath: helpers.root('tsconfig.json'),
    entryModule: helpers.root('app', 'app.module#AppModule')
});

module: {
    rules: [
        {
            test: /\.ts$/,
            use: '@ngtools/webpack'
        }
    ]
},
plugins: [
aotPlugin
]

现在，当您运行webpack时，@ngtools/webpack将在内部编译Angular 开箱即用。值得注意的是，将@ngtools/webpack仅用于生成构建是一种很好的做法，因为它产生的错误消息是bollocks。

@ ngtools / webpack：缺少app.module.ngfactory

1 个答案: