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

can't install angular cli on ubuntu 16.04
How to solve No 'Access-Control-Allow-Origin' header is present on the requested resource with angular 2 service written with angular-cli?
Usage of watch parameter in eject command of Angular CLI
Serving and testing a bundle after ng build
routerLink stopped working in #angular/cli
How to run Angularcli project with https
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

Categories

HOME
pug
jenkins-plugins
wms
apple-numbers
defragmentation
triggers
eval
outlook-web-addins
rfid
google-shopping
gatsby
finite-group-theory
automata
alfresco-share
device-detection
kadanes-algorithm
android-fragmentactivity
ng2-dragula
countif
pdfsharp
tampermonkey
python-textprocessing
websauna
protobuf-net
construct-2
viewstate
openpgp
passenger
sonarqube-scan
strstr
concrete5-5.7
installshield-2012
active-model-serializers
brute-force
alchemy.js
cross-entropy
ddms
xbim
jdbi
vcf
lirc
ideone
appstore-approval
uiviewpropertyanimator
butterknife
cdk
lotus
restivejs
sql-server-administration
libreadline
cleditor
alter
post-processing
fill
cmocka
magento-1.4
multinomial
drf-nested-routers
schtasks.exe
app.xaml
webhdfs
risk-analysis
pyopengl
graphical-logo
stackframe
low-level
jai
c++-actor-framework
pgagent
dto
neoload
picat
joox
delphi-xe3
logentries
real-time-updates
vertical-rhythm
dynamic-binding
visual-studio-2003
apache2.2
shiva3d
sametime
trailing-slash
mvs
ubuntu-11.10
vim-powerline
javascriptserializer
sunspot-rails
cadisplaylink
fotoware
makefile-project
emacs23
testunit
port-scanning
out-of-browser
quick-search
yajl
winverifytrust
callgrind
evb

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