App compiled with AngularCompilerPlugin fails to start

From @totycro on April 27, 2018 13:36

Bug Report or Feature Request (mark with an x)

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

Area

- [ x ] devkit
- [ ] schematics

Versions

node --version: v8.11.1 npm --version: 5.6.0 Linux Ubuntu 16.04.4 LTS (Xenial Xerus), building in docker image node:8.11.1 Please see also my package.json below

Repro steps

1. ./node_modules/.bin/webpack --colors --config webpack.aot.config.js
2. Try start app in browser

The log given by the failure

core.js:5722 Uncaught TypeError: Cannot read property 'name' of undefined
    at eval (core.js:5722)
    at ZoneDelegate.invoke (zone.js:387)
    at Object.onInvoke (core.js:4981)
    at ZoneDelegate.invoke (zone.js:386)
    at Zone.run (zone.js:137)
    at NgZone.run (core.js:4798)
    at PlatformRef.bootstrapModuleFactory (core.js:5721)
    at eval (main.ts:27)
    at Object../src/app/main.ts (bundle-7930b82….js:737)
    at __webpack_require__ (bundle-7930b82….js:20)

Desired functionality

App starts and angular is initialized.

Mention any other details that might be useful

Apparently, there’s a problem with the AOT configuration. main.ts is transformed to this:

var AppComponent = (function () {
    function AppComponent() {
        this.foo = 4;
    }
    return AppComponent;
}());

var AppModule = (function () {
    function AppModule() {
    }
    return AppModule;
}());

_angular_platform_browser__WEBPACK_IMPORTED_MODULE_3__["platformBrowser"]().bootstrapModuleFactory(_main_ngfactory__WEBPACK_IMPORTED_MODULE_2__["AppModuleNgFactory"]);

However the first parameter to bootstrapModuleFactory is an object of type NgModuleFactory_, which has a property moduleType with value undefined. It seems that AppComponent isn’t properly compiled to an NgFactory.

Later the moduleType.name is used, which leads to the exception posted above and the app doesn’t even start.

Please let me know if I can provide you with any more information.

main.ts:

import 'zone.js';
import 'reflect-metadata';

import { Component, NgModule } from '@angular/core';

import { FormsModule } from "@angular/forms";
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";


@Component({
    selector: 'xxx',
    template: `
        AOT example {{ foo }}
    `
})
export class AppComponent {
    public foo: number = 4;
    constructor(
    ) {}
}

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
    ],
    providers:    [],
    declarations: [AppComponent],
    bootstrap:    [AppComponent],
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

webpack.aot.config:

var ngtools = require('@ngtools/webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

console.log("Production (AOT) Mode");

module.exports = {
    mode: 'development',

    entry: "./src/app/main.ts",

    output: {
        path: path.join(process.cwd(), 'build'),
        filename: "bundle-[hash].js"
    },

    resolve: {
        extensions: [".ts", ".js", ".tpl.html", ".html"]
    },

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

    plugins: [
        new ngtools.AngularCompilerPlugin({
            tsConfigPath: path.join(process.cwd(), 'tsconfig.json'),
            entryModule: path.join(process.cwd(), 'src/app/main#AppModule'),
            skipCodeGeneration: false
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

package.json:

{
  "name": "XXX"
  "version": "0.0.1",
  "description": "",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "",
  "dependencies": {
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@angular/router": "5.2.10",
    "@ng-bootstrap/ng-bootstrap": "1.1.2",
    "autoprefixer": "^8.3.0",
    "bootstrap": "4.1.0",
    "core-js": "2.5.5",
    "font-awesome": "4.7.0",
    "lodash-es": "4.17.5",
    "ng2-file-upload": "1.3.0",
    "ng2-toasty": "^4.0.0",
    "ngx-feature-toggle": "^5.1.1",
    "react": "^16.3.2",
    "rxjs": "5.5.10",
    "systemjs": "0.21.3",
    "typings": "2.1.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "1.7.4",
    "@angular/compiler-cli": "5.2.10",
    "@ngtools/webpack": "1.10.2",
    "@types/lodash-es": "^4.14.107",
    "@types/node": "^9.6.6",
    "angular2-template-loader": "0.6.2",
    "browser-sync-webpack-plugin": "2.2.2",
    "canonical-path": "0.0.2",
    "concurrently": "3.5.1",
    "css-loader": "0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "node-sass": "^4.5.2",
    "popper.js": "^1.14.3",
    "postcss-loader": "^2.0.6",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.12",
    "sass-loader": "7.0.1",
    "style-loader": "0.21.0",
    "ts-loader": "4.2.0",
    "tslint": "^5.5.0",
    "typescript": "2.8.3",
    "webpack": "4.6.0",
    "webpack-bundle-analyzer": "2.11.1",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "3.1.3"
  },
  "repository": {}
}

Copied from original issue: angular/devkit#798

[Sammy2005]

Same issue. Are there hopes that this will be resolved

[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.}