【发布时间】：2017-10-10 05:58:59
【问题描述】：
这是我正在使用的版本：
@angular/cli: 1.0.3
node: 6.9.2
os: win32 x64
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2
Windows 7
重现步骤。
1.- ng new myproject 光盘我的项目 构建产品
2.- 将 dist 上的内容复制到 java web 项目的 WebContent 上 在 tomcat 服务器上部署应用程序。 在浏览器上打开应用。**
失败给出的日志。
我曾经在 tomcat 服务器上毫无问题地渲染我的 angular2 应用程序（由 cli 命令 ng build --prod -aot 编译）。
现在，我想将 angular 升级到 4，将 cli 升级到 1。
这是我想在生产服务器中部署的新空项目的 package.json。
{ "name": "newproject", "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.3",
"@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.1.1",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0" } }
这里是 angular-cli.json：
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": {
"name": "newproject" }, "apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
} ], "e2e": {
"protractor": {
"config": "./protractor.conf.js"
} }, "lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
} ], "test": {
"karma": {
"config": "./karma.conf.js"
} }, "defaults": {
"styleExt": "css",
"component": {} } }
所需的功能。
我希望该应用程序有效！消息显示在屏幕上。相反，我在控制台中看到“正在加载...”消息和以下错误跟踪：
- 在 Chrome 57.0.2987.133（64 位）中：
未处理的承诺拒绝错误：Zone.js 检测到 ZoneAwarePromise
(window|global).Promise已被覆盖。 最可能的原因是在 Zone.js 之后加载了一个 Promise polyfill（加载 zone.js 时不需要使用 Polyfilling Promise api。如果必须加载一个，请在加载 zone.js 之前这样做。） 在 Function.Zone.assertZonePatched (zone.js:44) 在新的 NgZone (core.es5.js:3952) 在 PlatformRef__._bootstrapModuleFactoryWithZone (core.es5.js:4746) 在 core.es5.js:4790 在 l (bundle.js:2) 在 bundle.js:2 在 MutationObserver.a (bundle.js:2) 在 ZoneDelegate.invoke (zone.js:381) 在 Zone.runGuarded (zone.js:154) 在突变观察者。 (zone.js:132)
- 在 Firefox 53.0.2（32 位）中：
Unhandled promise rejection Error: Zone.js has detected that ZoneAwarePromise(window|global).Promisehas been overwritten. Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.) Traza de la pila: Zone.assertZonePatched@http://localhost:8040/production/polyfills.bundle.js:2600:23 NgZone@http://localhost:8040/production/vendor.bundle.js:4315:9 PlatformRef_.prototype._bootstrapModuleFactoryWithZone@http://localhost:8040/production/vendor.bundle.js:5109:22 PlatformRef_.prototype._bootstrapModuleWithZone/<@http://localhost:8040/production/vendor.bundle.js:5153:53 l@http://127.0.0.1:51349/codelive-assets/bundle.js:2:18437 D/<@http://127.0.0.1:51349/codelive-assets/bundle.js:2:18559 a@http://127.0.0.1:51349/codelive-assets/bundle.js:2:22691 ZoneDelegate.prototype.invoke@http://localhost:8040/production/polyfills.bundle.js:2937:17 Zone.prototype.runGuarded@http://localhost:8040/production/polyfills.bundle.js:2710:28 Zone.prototype.wrap/<@http://localhost:8040/production/polyfills.bundle.js:2688:24
提及任何其他可能有用的细节。
在互联网上搜索我发现这可能是 zone.js 的问题 为了找出错误，我添加了以下可能有趣的文件。
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
polyfills.ts
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following to support `@angular/animation`. */
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
/**
* Date, currency, decimal and percent pipes.
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
*/
// import 'intl'; // Run `npm install --save intl`.
【问题讨论】：
-
2019年我也遇到了同样的问题，你是怎么解决的？
-
我在 Angular 8 中的两个单独的 Angular 项目中也遇到了同样的问题。有人想出这个吗？似乎已经发生了很多年。