Menu
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)
621
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
184
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
