Angular-cli: @ngtools/webpack keeps @angular/compile module in AOT build

[klinki]

Bug Report

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@ngtools/webpack: 1.3.1 
NodeJS: v6.10.3
npm: 5.0.0

Repro steps.

Webpack config

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
var ngtools = require('@ngtools/webpack');
var AotPlugin = ngtools.AotPlugin;

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
    devtool: 'source-map',

    output: {
        path: helpers.root('../../../target/rhamt-web'),
        filename: 'js/[name].js',
        chunkFilename: 'js/[id].chunk.js'
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: /jquery*\.js/,
                loaders: '@ngtools/webpack'
            }
        ]
    },

    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new ExtractTextPlugin('css/[name].css'),
        new AotPlugin({
            tsConfigPath: './tsconfig-production.json',
            basePath: '.',
            mainPath: 'src/main.ts',
            skipCodeGeneration: true
        }),
        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
            mangle: {
                keep_fnames: true
            }
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'ENV': JSON.stringify(ENV)
            }
        })
    ]
});

main.ts

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

require('./keycloak.json.ftl');
require('../css/windup-web.css');

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

platformBrowserDynamic().bootstrapModule(AppModule).then(app => {
    // this is just here to make some data easier to retrieve from tests
    window["app"] = app;
    window["MainNgZone"] = app.injector.get(NgZone);
    if (window["windupAppInitialized"] != null)
        window["windupAppInitialized"](app, window["MainNgZone"]);
})
.catch(err => {
    console.log(err);
    if (window["windupAppInitialized"] != null)
        window["windupAppInitialized"]();
});

Desired functionality.

@angular/compiler module should not be present in AOT builded app.

[filipesilva]

You have the skipCodeGeneration: true turned on, which disables AOT builds and instead gives you a JIT build that does require the compiler at runtime. Set skipCodeGeneration: false and that should give you an AOT build that doesn't require the compiler.

[klinki]

Thanks, it seems it worked.
Update: it seems I was celebrating prematurely. Now I get

g.getOwnMetadata is not a function

error in browser and application doesn't load.

What is the difference between dev build made by awesome-typescript-loader or some other typescript loader and ngtools/webpack AotPlugin with skipCodeGeneration: true ? (I've noticed AOT build with skipCodeGeneration is still significantly smaller than regular dev build).

And why is the resulting code in bundle (sort of) twice? Once from $$_gendir directory (which is what I would expect from AOT) and once from regular src?

[hheexx]

I have the same problem.
skipCodeGeneration is false and everything is wokring, but it looks like comiler is still included.

[kavi87]

Thanks for the great tooling. Please, I'd like explanation on this as well, we use ngtools/webpack and the code looks duplicated in the bundle and we still have the compiler included in one of our bundle.

[filipesilva]

@klinki @hheexx @kavi87 can you provide a reproduction? On the project I tested the compiler is not in the generated bundles.

[hheexx]

@filipesilva I found the problem for me.
It was because of code for HMR.
This line:

platformBrowserDynamic().destroy();

[kavi87]

@filipesilva Thnaks for the support, there are no issues with the aot plugin regarding the compiler inclusion, it was doing exactly what it was told to because one of our component was importing the compiler explicitely ! After removing the import everything was fine.
I still have to figure out how to replace the functionality that was requiring compilation at runtime but that's another issue.

I'm still puzzled about the "duplication" though. We have both some-component.ts and some-component.ngfactory.ts in the same bundle or at least that's what webpack-bundle-analyzer reports. I'll have to investigate and learn a bit more about aot, maybe that's just another silly mistake on our part.

[hansl]

@kavi87 This is not a duplication. The ngfactory code is the equivalent of the template of your component. It does not contain the actual logic of the component (which is what your my-component.ts file contains). So the two files are necessary.

If your issue is fixed I'll close as such, but I'll wait a day or two before doing so just in case you still have a problem.

[kavi87]

@hansl @filipesilva Hey thanks, I've read this awesome post by Minko Gechev since and it makes sense now. This should also answer @klinki interrogations. No more issue for me.

[klinki]

@kavi87 Thanks for info, now it is clear.

[sherlock1982]

I started having the same issue when moved from Angular 6 to Angular 7 and all latest toolchains. Is there a way to determine why compiler is in the build?

[elvisbegovic]

@sherlock1982 https://github.com/angular/angular-cli/issues/12646

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}