Angular 4 AOT build issue, bootstrap error

Question

I created an Angular 4 hello world app with Angular CLI and I want to try production release with AOT/WEBPACK build but I am unable to make it work. I followed the steps in angular.io site (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html). When I build, getting bootstrap error.

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

package.json

{
  "name": "angular2-aot",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "rollup": "^0.41.6",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-uglify": "^2.0.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular2-AOT</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowser }    from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';

import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

When I build, I am getting below error

ng build --prod

Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
    at Object.resolveEntryModuleFromMain (E:\Angular2\angular2-aot\node_modules\@ngtools\webpack\src\entry_resolver.js:128:11)
    at AotPlugin._setupOptions (E:\Angular2\angular2-aot\node_modules\@ngtools\webpack\src\plugin.js:142:50)
    at new AotPlugin (E:\Angular2\angular2-aot\node_modules\@ngtools\webpack\src\plugin.js:26:14)
    at _createAotPlugin (E:\Angular2\angular2-aot\node_modules\@angular\cli\models\webpack-configs\typescript.js:55:12)
    at Object.exports.getAotConfig (E:\Angular2\angular2-aot\node_modules\@angular\cli\models\webpack-configs\typescript.js:89:19)
    at NgCliWebpackConfig.buildConfig (E:\Angular2\angular2-aot\node_modules\@angular\cli\models\webpack-config.js:26:37)
    at Class.run (E:\Angular2\angular2-aot\node_modules\@angular\cli\tasks\build.js:26:92)
    at Class.run (E:\Angular2\angular2-aot\node_modules\@angular\cli\commands\build.js:143:26)
    at Class.<anonymous> (E:\Angular2\angular2-aot\node_modules\@angular\cli\ember-cli\lib\models\command.js:134:17)
    at process._tickCallback (internal/process/next_tick.js:109:7)

You use angular-cli. Read about production build for angular-cli — yurzui, May 21 '17 at 16:50
See first answer from http://stackoverflow.com/questions/37631098/how-to-bundle-an-angular-app-for-production — yurzui, May 21 '17 at 16:51
This looks like Angular 4, not Angular 2 -- might want to mention that, as that may have an impact on how the question is answered. — chrispy, May 21 '17 at 16:52
are you using `ng build --prod`? If so, what is the error being thrown, if there are any? — borislemke, May 21 '17 at 17:17
Here is another post with a similar question: https://stackoverflow.com/questions/43338758/angular-4-0-0-could-not-find-bootstrap-code/43457057. — ConnorsFan, May 21 '17 at 19:33
http://stackoverflow.com/questions/40992917/angular-cli-after-update-npm-start-give-error — Ramesh Rajendran, May 22 '17 at 04:47
@borislemke i am using 'ng build --prod'. updated the same in question with error message — Sinu Varghese, May 22 '17 at 09:29
i know angular-cli have "--aot" option (without any code modification), did you try to use it? — happyZZR1400, May 26 '17 at 15:21

score 4 · Answer 1 · answered May 23 '17 at 13:54

Please do 1 thing run npm -g install @angular/cli

then create production build

it might be angular cli old version issue

and the if you still find issue then put below code in your main.js

import { WfaNg2Module } from './app';

and change

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

to

document.addEventListener('DOMContentLoaded', function () {
  platformBrowserDynamic().bootstrapModule(WfaNg2Module, []);
}, false);

Please let me know if this not help

score 3 · Answer 2 · answered May 18 '17 at 12:27

You don't have to use module: module.id, anymore. It was for previuos Angular 2 versions.

See -> https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Component-relative template URLS

The AOT compiler requires that @Component URLS for external templates and CSS files be component-relative. That means that the value of @Component.templateUrl is a URL value relative to the component class file. For example, an 'app.component.html' URL means that the template file is a sibling of its companion app.component.ts file.

While JIT app URLs are more flexible, stick with component-relative URLs for compatibility with AOT compilation.

In the link go here -> AOT QuickStart source code Here's the pertinent source code. You need to create an tsconfig-aot.json.. make rollup file with rollup-config.js.. and add it to index.html -> — Maxi, May 22 '17 at 17:31

score 1 · Answer 3 · answered May 28 '17 at 11:48

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';
import { BSystemService } from './bGlobal/BSystemService';

let bSystemService: BSystemService = BSystemService.getInstance();

if (environment.production) {
enableProdMode();
}

if (bSystemService.deviceType == 'MOBILE') {
document.addEventListener('deviceready', function() {
bootstrapNow();
});
} else {
bootstrapNow();
}

function bootstrapNow() {
platformBrowserDynamic().bootstrapModule(AppModuleNgFactory);
}`

Angular 4 AOT build issue, bootstrap error

3 Answers3