CODEWITHSUNDEEP
node.jsangulartypescriptwebpackangular2-aot
serlingpa
serlingpa

Reputation: 12660

@ngtools/webpack: missing app.module.ngfactory

I am trying to use the @ngtools/webpack plugin to create an AoT version of my Angular 4 app within webpack 2, but I am having difficulty understanding what this plugin produces.

In particular, I have a main.aot.ts entry point in my webpack for AoT, which looks like this:

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

platform.bootstrapModuleFactory(AppModuleNgFactory);

and an extract of my webpack.config.js looks like this:

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
        })
    );
}

Does this @ngtools/webpack plugin generate module files in the same way that the ngc compiler does, for inclusion in main.aot.ts? If not, how does it work? There aren't many examples of this on the web.

Upvotes: 0

Views: 681

Answers (1)

George Knap
George Knap

Reputation: 1350

The thing about @ngtools/webpack is that it creates those .ngfactory files in memory. Therefore there is no need to have any 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);

In your webpack config:

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
]

Now, when you run the webpack the @ngtools/webpack will internally compile the Angular out of the box. It's worth noting it's a good practice to have @ngtools/webpack only for production build because error messages it produces are bollocks.

Upvotes: 1

Related Questions