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

Deploying Angular on Linode
Angular-cli with Stylus doesn't work
Use angular-cli proxy for multiple backends
chunk files size are multiplied by 5 on build size ng build --prod
AngularCli: disable minification
Angular Cli e2e element explorer not responding
Angular cli generate a service and include the provider in one step
Angular-cli not generating dist directory with ng build
How to update service json or array value on click in angular2?
How to revert from Angular-cli to Angular without cli for server-side rendering with Angular Universal
How to change file index outside the root
angularCLI Access-Control-Allow-Origin Multiple Origin Domains
Angular CLI how to merge json files
Angular CLI (ng) use single instead of double quotes
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?

Categories

HOME
cakephp-3.x
crystal-reports
security
pug
google-cloud-bigtable
erlang
tinyos
npm
vhdl
nlp
aem
wms
ruby-on-rails-3
subquery
facebook-javascript-sdk
jboss7.x
xul
image-recognition
postmessage
lenskit
reduction
esql
google-ima
http-method
scalajs-react
ui5
widevine
upnp
i3
invoke-command
pep8-assembly
piecewise
protobuf-net
ipfw
pdflatex
idl
modelandview
npm-shrinkwrap
openshift-enterprise
office365connectors
flex4.5
html-agility-pack
ivona
filepath
ideone
ogre3d
chrome-remote-desktop
slot
text-classification
jexl
nuget-server
in-memory-database
search-box
jszip
collapsingtoolbarlayout
createobject
pydio
clob
string-parsing
eml
plone-3.x
textkit
bridge
web-component-tester
guzzle6
stackframe
magento-1.12
c++-actor-framework
pisa
inputaccessoryview
pgagent
microblaze
docopt
code-testing
wss
slick-2.0
delphi-xe3
osx-snow-leopard
justgage
nuspec
shiva3d
pep8
snapjs
cgpath
android-4.0
usn
moq-3
scrollto
objective-c-protocol
ajax.beginform
throttling
qtembedded
noir
trampolines
oggvorbis
kpi
visual-studio-2010-beta-2
data-entry

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