angular-cli之在 apache tomcat 上部署 angular 2 (4) 应用程序时,zone.js promise 会被覆盖
这是我正在使用的版本:
@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.- 新建我的项目 光盘我的项目 构建产品
2.- 将dist上的内容复制到一个java web项目的WebContent上 在 tomcat 服务器上部署应用程序。 在浏览器上打开应用程序。**
失败给出的log。
我曾经在 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 位)中:
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.- ng 新 a4project 2.- cd a4project 3.- 构建 --prod 4.- 将 a4project/dist 的内容复制到 javaA4Project/WebContent/ 5.- 使用 maven clean install 创建 war 文件 6.- 将 a4Project 复制到 apache-tomcat-7/webapps/ 7.- 启动服务器
应用程序在 web 上呈现,zone.js 没有问题。
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。