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

发布时间：2020-12-17 07:28:00 所属栏目：安全来源：网络整理

导读：我使用Angular CLI创建了一个Angular 4 hello world应用程序,我想尝试使用AOT / WEBPACK构建的生产版本,但我无法使其工作.我按照angular.io网站( https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)中的步骤进行操作.当我构建时,获得引导错误.

我使用Angular CLI创建了一个Angular 4 hello world应用程序,我想尝试使用AOT / WEBPACK构建的生产版本,但我无法使其工作.我按照angular.io网站( https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)中的步骤进行操作.当我构建时,获得引导错误.

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

当我构建时,我遇到了错误

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:Angular2angular2-aotnode_modules@ngtoolswebpacksrcentry_resolver.js:128:11)
    at AotPlugin._setupOptions (E:Angular2angular2-aotnode_modules@ngtoolswebpacksrcplugin.js:142:50)
    at new AotPlugin (E:Angular2angular2-aotnode_modules@ngtoolswebpacksrcplugin.js:26:14)
    at _createAotPlugin (E:Angular2angular2-aotnode_modules@angularclimodelswebpack-configstypescript.js:55:12)
    at Object.exports.getAotConfig (E:Angular2angular2-aotnode_modules@angularclimodelswebpack-configstypescript.js:89:19)
    at NgCliWebpackConfig.buildConfig (E:Angular2angular2-aotnode_modules@angularclimodelswebpack-config.js:26:37)
    at Class.run (E:Angular2angular2-aotnode_modules@angularclitasksbuild.js:26:92)
    at Class.run (E:Angular2angular2-aotnode_modules@angularclicommandsbuild.js:143:26)
    at Class.<anonymous> (E:Angular2angular2-aotnode_modules@angularcliember-clilibmodelscommand.js:134:17)
    at process._tickCallback (internal/process/next_tick.js:109:7)

请做一件事运行npm -g install @ angular / cli

然后创建生产构建

它可能是角度cli旧版本问题

如果你仍然发现问题,那么将下面的代码放在你的main.js中

import { WfaNg2Module } from './app';

并改变

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

至

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

如果没有帮助,请告诉我

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!