zone.js 在 apache 上部署 angular 2 (4) 个应用程序时承诺会被覆盖 tomcat
zone.js promise overwritten when deploy angular 2 (4) application on apache tomcat
这是我正在使用的版本：
@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 构建产品
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": {} } }
需要的功能。
我希望该应用程序有效！消息显示在屏幕上。相反，我在控制台中看到 "loading..." 消息和以下错误跟踪：
- 在 Chrome 57.0.2987.133（64 位）中：
Unhandled promise rejection Error: Zone.js has detected that ZoneAwarePromise (window|global).Promise has 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.)
at Function.Zone.assertZonePatched (zone.js:44)
at new NgZone (core.es5.js:3952)
at PlatformRef_._bootstrapModuleFactoryWithZone (core.es5.js:4746)
at core.es5.js:4790
at l (bundle.js:2)
at bundle.js:2
at MutationObserver.a (bundle.js:2)
at ZoneDelegate.invoke (zone.js:381)
at Zone.runGuarded (zone.js:154)
at MutationObserver. (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`.
我创建了一个具有以下版本的项目：
```
@angular/cli: 1.0.6
node: 6.9.2
os: win32 x64
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.6
@angular/compiler-cli: 4.1.3
```
1.- 新建 a4 项目
2.- cd a4project
3.- 构建 --prod
4.- 将 a4project/dist 的内容复制到 javaA4Project/WebContent/
5.- 使用 maven clean install 创建 war 文件
6.- 将 a4Project 复制到 apache-tomcat-7/webapps/
7.- 启动服务器
应用程序在网络上呈现 zone.js 没有问题。
这是我正在使用的版本：
@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 构建产品
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": {} } }
需要的功能。
我希望该应用程序有效！消息显示在屏幕上。相反，我在控制台中看到 "loading..." 消息和以下错误跟踪：
- 在 Chrome 57.0.2987.133（64 位）中：
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.) at Function.Zone.assertZonePatched (zone.js:44) at new NgZone (core.es5.js:3952) at PlatformRef_._bootstrapModuleFactoryWithZone (core.es5.js:4746) at core.es5.js:4790 at l (bundle.js:2) at bundle.js:2 at MutationObserver.a (bundle.js:2) at ZoneDelegate.invoke (zone.js:381) at Zone.runGuarded (zone.js:154) at MutationObserver. (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`.
我创建了一个具有以下版本的项目：
```
@angular/cli: 1.0.6
node: 6.9.2
os: win32 x64
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.6
@angular/compiler-cli: 4.1.3
```
1.- 新建 a4 项目 2.- cd a4project 3.- 构建 --prod 4.- 将 a4project/dist 的内容复制到 javaA4Project/WebContent/ 5.- 使用 maven clean install 创建 war 文件 6.- 将 a4Project 复制到 apache-tomcat-7/webapps/ 7.- 启动服务器
应用程序在网络上呈现 zone.js 没有问题。