[ANGULAR] Zone.js error in FF, Edge, Safari

[NARESH.RAI]

Hi Team,

Facing this below issue when using gantt/scheduler/calendar controls in angular app on Prod AOT build.
I was facing this issue on local as well, but found on some forum to move the

import 'zone.js/dist/zone';

from polyfills.ts to main.ts, it solved in localhost but still the issue exist in prod site.

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.) 
notify gantt.umd.js:224506

It is really critical and severe issue as it is completely blocking the site loading on FF, Edge browsers on Desktop and iPad Safari.

Thanks!

[sergey.maltsev]

Hi!

If you don't require IE11 support you may try to build with module bundle instead of umd and place import of zone.js back on place to polyfills.ts.

Just switch imports in _shared (if used) and source code to this:

import ... from 'bryntum-gantt';

Then rebuild shared and source.

If you still have problems please attach app code here or in PM so we could check what's wrong there.

[NARESH.RAI]

Hi,

Tried above suggested solution but getting error ->
"Bundle included twice, check cache-busters and file types (.js)"

[sergey.maltsev]

Hi!

Please remove all node_modules, dist/build folders for _shared and application source .
Then rebuild _shared and application.
Most likely you used different bundle versions for Wrappers and Application.

[NARESH.RAI]

H,
Tried above solution but still getting same error when we remove gantt.umd.js & schedulerPro.umd.js

We are using Gantt-4.0 beta & schedulerPro-4.0 beta version

[arcady]

Please provide a runnable test case so we could reproduce the issue. Hard to guess what's going on otherwise.

[NARESH.RAI]

Hello,

I have created demo test app -

testApp.zip

(23.35 KiB) Downloaded 118 times

which includes both Gantt (latest version beta-2) and
Scheduler (latest version beta -2) widgets.

We are facing below mentioned issues -
1) With AOT build scheduler is not rendering properly but Gantt is working fine.
2) Getting zone js error in console,which blocks app to load totally.
this issue we are getting for all browsers except chrome and also in IPad.

To run the app follow below steps -
1) Copy Gantt & scheduler library build folder and respective angular wrappers only @ mentioned path in Package.json
2) Do Npm install and ng serve (u will get issue #2 in browser console)
3) Build application using ng build --prod (AOT build) and u will get issue #1
4) Gantt & scheduler widgets are working fine when u run ng serve.

Thanks

[fabio.mazza]

Thank's Naresh for your test, meanwhile, could you please check if this solution works for you?
viewtopic.php?p=77362#p77362

Thank's!

[saki]

Hello Naresh,

I have downloaded the testApp, thank you for preparing it. After intensive debugging I found a solution and it is to upgrade zone.js package.

I have run

npm i zone.js@latest

and the application thereafter works in all supported browsers (excluding IE 11 because of gantt). I have tested it in Safari, Edge[webkit], Edge[old], Firefox, Firefox ESR and Chrome.

Development mode (ng serve) works w/o any further changes. For building the production version successfully I had to increase budgets in angular.json:

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "5mb",
    "maximumError": "10mb"
  }
]

Also I had to run:

NODE_OPTIONS='--max-old-space-size=8192' ng build --prod

to build the production version. Both development and production version work and I have not experienced any negative consequences of upgrading zone.js

Let us please know if it works for you too.

[NARESH.RAI]

Hello saki,

I will check given solution for zone js error and confirm.
any updates on issue #1 ?

Thanks