angular-cli


zone.js promise overwritten when deploy angular 2 (4) application on apache tomcat


This are the versions I'm working with:
#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
Repro steps.
1.-
ng new myproject
cd myproject
ng build prod
2.-
Copy the content on dist on the WebContent of a java web project
Deploy the app on a tomcat server.
Open the app on a browser.**
The log given by the failure.
I used to render my angular2 application (compiled by the cli command ng build --prod -aot ) with no problems on a tomcat server.
Now, I would like to upgrade to angular to 4 and the cli to 1.
This is the package.json of a the new empty project I'd like to deploy in production server.
{ "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" } }
Here the 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": {} } }
Desired functionality.
I would like the app works! message be shown on screen. Instead I see the "loading..." message and the follow error trace in console :
- In Chrome 57.0.2987.133 (64-bit):
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)
In Firefox 53.0.2 (32-bit):
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
Mention any other details that might be useful.
Googling on internet I've seen that It could be a problem with zone.js
I add the follow files that could be interesting in order to find out the bug.
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`.

Related Links

what is npm i bootstrap#next?
Angular-Cli Best way to manage notices
Puzzling angular-cli AOT error
Create Project with Angular 4 Release using angularcli
addons removed in angular-cli.json whats the replacement
angular-cli: ng serve command with config error
Augury Angular-cli When I installed the augury .Error is as follows
Teamcity for building Angular cli app
angular cli update issue on local folder
Access to -aot parameter in code
Missing peer dependencies after installing latest angular-cli: What to do?
angular-cli ng serve : Error: No errors
Getting error after Angular cli update
Does angular-cli uses rollup to do ahead-of-time compilation and adding all into one file?
Angular CLI install error
Using glob for assets in angular-cli throws error

Categories

HOME
xbox-live
pug
ibm-watson-cognitive
bing
jbehave
avro
hana
apache2
javamail
value
schemacrawler
browserify
i2c
internet-explorer-11
contact-form-7
android-viewpager
data-synchronization
typeahead
rapidjson
mod-pagespeed
uisplitviewcontroller
prestodb
device-detection
tweets
multiple-columns
jni
cvs2svn
uiautomator
bcrypt
scalajs-react
emv
hash-collision
image-quality
helper
ggmap
xor
postgresql-9.2
qtablewidget
viewstate
css-counter
openshift-enterprise
socketscan
median
powermta
amd
z3py
amazon-clouddrive
sapui
pdfkit
efxclipse
verbose
system.web.ui.webcontrols
cleditor
vst
gameanalytics
freetype2
spring-repositories
gemini
asp.net-mvc-partialview
supportmapfragment
inet
approval-tests
asymptote
anythingslider
insertion-sort
plone-3.x
android-cursoradapter
android-viewholder
sem
sevenzipsharp
achartengine
rx-groovy
pyopengl
crash-dumps
mdm-zinc
ember-cli-addons
uptodate
low-level
start-job
sysctl
kendo-mvvm
mser
humanizer
ember-addon
neoload
cppdepend
config-files
visualstatemanager
winrt-httpclient
healthvault
entity-framework-4.1
threadx
qt4.6
mvs
css-tables
fotoware
scrollto
parameterization
text-services-framework
makefile-project
electronic-signature
charts4j
rubycas
noir
server-error
pivotal-crm
.app
getresource
open-graph-beta
msn
j-interop
hadoop-plugins
external-assemblies
revision
longjmp
cots

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App