Angular 4 AOT Build-Problem, Bootstrap-Fehler

Ich habe eine Angular 4 Hallo Welt App mit Angular CLI erstellt und möchte die Produktionsversion mit AOT/WEBPACK Build versuchen, aber ich kann es nicht funktionieren. Ich folgte den Schritten in angular.io Website (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html). Wenn ich baue, bekomme Bootstrap Fehler.Angular 4 AOT Build-Problem, Bootstrap-Fehler

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

Als ich bauen, ich unten Störung erhalte

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)

Quelle

2017-05-18 Sinu Varghese

@yurzui, nein, ich folgte nur wenige Schritte in Angular.io. –

Sie verwenden angular-cli.Lesen Sie über Produktion Build für angular-cli – yurzui

@ yurzui, ich benutze angular-cli –

Sie nicht verwenden Modul haben: Modul. ID, mehr. Es war für vorherige Angular 2-Versionen.

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

Komponenten relativ Vorlage URLS

Der AOT-Compiler erfordert, dass @Component URLS für externe Vorlagen und CSS-Dateien bauteil relativ sein. Das bedeutet, dass der Wert von @ Component.templateUrl ein URL-Wert relativ zur Komponentenklassendatei ist. Beispiel: Eine 'app.component.html'-URL bedeutet, dass die Vorlagendatei eine Schwester der zugehörigen app.component.ts-Datei ist.

Während JIT-App-URLs flexibler sind, sollten Sie bei Komponenten-relativen URLs auf Kompatibilität mit der AOT-Kompilierung achten.

Quelle

2017-05-18 12:27:19 Maxi

Ich habe die Frage bearbeitet –

Im Link gehen Sie hier -> AOT QuickStart Quellcode Hier ist der entsprechende Quellcode. Sie müssen eine tsconfig-aot.json erstellen .. make Rollup-Datei mit rollup-config.js .. und fügen Sie es zu index.html -> – Maxi

tun Bitte 1, was laufen npm -g @ Winkel/cli installieren

dann erstellen Produktion

bauen es Winkel cli alte Version Ausgabe

sein könnte und die, wenn Sie dann noch finden Problem stellen Code unten in Ihrem main.js

import { WfaNg2Module } from './app';

und

ändern

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

Bitte lassen Sie mich wissen, ob dies nicht

helfen

Quelle

2017-05-23 13:54:06

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

Quelle

2017-05-28 11:48:31 HarryJs

Angular 4 AOT Build-Problem, Bootstrap-Fehler

Antwort

Verwandte Themen