堆栈内存溢出
  简体   繁体   English

Angular 4 AOT构建问题，引导错误

[英]Angular 4 AOT build issue, bootstrap error

 原文  2017-05-18 08:07:02  1   3    angular

问题描述

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. 我使用Angular CLI创建了一个Angular 4 hello world应用程序，我想尝试使用AOT / WEBPACK构建的生产版本，但我无法使其工作。 I followed the steps in angular.io site ( https://angular.io/docs/ts/latest/cookbook/aot-compiler.html ). 我按照angular.io网站（ https://angular.io/docs/ts/latest/cookbook/aot-compiler.html ）中的步骤进行操作。 When I build, getting bootstrap error. 当我构建时，获取引导错误。

tsconfig.json 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 的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 的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 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 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)

3 个解决方案

解决方案1
 4  2017-05-23 13:54:06

Please do 1 thing run npm -g install @angular/cli 请做一件事运行npm -g install @ angular / cli

then create production build 然后创建生产构建

it might be angular cli old version issue 它可能是角度cli旧版本问题

and the if you still find issue then put below code in your main.js 如果你仍然发现问题，那么将下面的代码放在你的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 如果没有帮助，请告诉我

解决方案2
 3  2017-05-18 12:27:19

You don't have to use module: module.id, anymore. 您不必再使用module：module.id了。 It was for previuos Angular 2 versions. 这是针对previuos Angular 2的版本。

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

Component-relative template URLS 组件相对模板URLS

The AOT compiler requires that @Component URLS for external templates and CSS files be component-relative. AOT编译器要求外部模板和CSS文件的@Component URLS是组件相关的。 That means that the value of @Component.templateUrl is a URL value relative to the component class file. 这意味着@ Component.templateUrl的值是相对于组件类文件的URL值。 For example, an 'app.component.html' URL means that the template file is a sibling of its companion app.component.ts file. 例如，“app.component.html”URL表示模板文件是其配套app.component.ts文件的兄弟。

While JIT app URLs are more flexible, stick with component-relative URLs for compatibility with AOT compilation. 虽然JIT应用程序URL更灵活，但为了与AOT编译兼容，请坚持使用组件相对URL。

解决方案3
 1  2017-05-28 11:48:31

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Angular 2 AOT构建-需求问题 - Angular 2 aot build - require issue Angular 4 + AOT Webpack构建问题 - Angular 4 + AOT webpack build issue Angular ng build -p AoT问题 - Angular ng build -p AoT issue AOT清理加载程序中的错误，无法以AOT模式构建Angular App - Error in AOT cleanup loader, failed to build Angular App with AOT mode 试图使用aot angular找到bootstrap错误 - tried to find bootstrap error using aot angular Angular aot构建中的错误：不支持表达式形式 - Error in Angular aot build: Expression form not supported Angular 2 AOT构建错误（找不到模块） - Angular 2 AOT build error (module not found) Angular CLI-ng生成期间发生AOT错误 - Angular CLI - AOT error during ng build Angular AoT 构建失败 - The Angular AoT build failed 使用 Angular AOT 构建失败 - Build failed with Angular AOT
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM