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

[saki]

We have addressed the zone.js issue the following way. We have

1. prepared new "lite" umd packages that do not contain Promise polyfill

2. updated all angular examples to use the new packages

3. added Promise polyfill to src/polyfills.ts where needed for non-Chrome browser compatibility

4. downgraded Angular wrappers to Angular 7 to achieve better compatibility with applications

5. built all angular examples in production mode by default

Extract the attached zip over the existing files and rebuild please. That should solve the zone problem completely (without necessity to upgrade zone.js).

Zip contains Scheduler and Gantt wrappers and examples that use the new "lite" packages. Try them please and let us know if your issues are solved or if there is anything we can assist you with.

[NARESH.RAI]

Hello Saki,

Tried provided library but getting attached error.

gantt-zone-issue.JPG (68.13 KiB) Viewed 1421 times

Followed below steps -
1) Copied gantt.lite.umd.js in build folder.
2) Rebuild Gantt wrapper from provided library.
3) replaced gantt.umd.js with gantt.lite.umd.js in gantt .ts files.
4) npm i and ng serve

And same error i am getting in ur provided library

let me know if i missed anything.

For scheduler please provide scheduler-pro angular wrapper as provided example -> basic
has different angular wrapper.

[sergey.maltsev]

Hi, NARESH.RAI!

Please check out latest 4.0.0 RC-1 release.
We have reworked gantt.lite.umd.js there to have NO polyfills at all (previous one here in forum topic is a different one).
Please get latest clean release from CustomerZone.
First step please try to build our demos there to check if they build/work for you.
After that you could proceed with your application.

All wrappers in RC-1 already contain links to gantt.lite.umd.js so no replacements are required there.

[saki]

Regarding SchedulerPro wrapper: it is included in SchedulerPro 4.0.0-rc-1 download package. It is located in examples/frameworks/npm/angular/projects/schedulerpro folder. Actually, there are two wrappers provided: SchedulerPro wrapper and ResourceHistogram wrapper. These wrappers are automatically built when building our examples but you may need to build them manually for your application with:

cd examples/frameworks/npm/angular
npm i
npm run build

The resulting wrappers' package is then located in examples/frameworks/npm/angular/dist/schedulerpro folder from where it can be installed by npm. The resulting entry in package.json will look like this:

  "dependencies": {
    "@bryntum/schedulerpro-angular": "file:../../npm/angular/dist/schedulerpro",
    ...

schedulerpro.lite.umd.js is located in build directory of SchedulerPro and it should be used in all Angular applications. It contains no polyfills therefore there will be no conflict with zone.js. Also, there should be no polyfills specified in app/src/polyfills.ts of the application.

Note: Although this is information for SchedulerPro, the same logic is used for other products (Calendar, Gantt, Scheduler, Grid). However, path for Scheduler, Gantt and Grid is different and it is examples/angular/_shared.

[NARESH.RAI]

Hello Team,

New version - Rc-1, is working fine without any issues.

I have updated this version in my application as shown in examples and app builds successfully but in browser console getting error -
schedulerpro.lite.umd.js:43613 Uncaught Error: Bundle included twice, check cache-busters and file types (.js)

gantt-zone-issue.JPG (40.24 KiB) Viewed 1406 times

I have tried removing node_modules and reinstalled all npm packages but still getting same issue.

My application has both Gantt + scheulerPro where as in your examples we are running all demos individually, i guess thats the reason we are able to run examples successfully.

Any solution ?

Thanks

[saki]

This error almost always indicates that somewhere in the sources is:

import { xxx } from 'bryntum-schedulerpro/schedulerpro.umd.js'; // or
import { xxx } from 'bryntum-schedulerpro';

Search please the application sources for a forgotten import of the other bundle and replace all found occurrences with:

import { xxx } from 'bryntum-schedulerpro/schedulerpro.lite.umd.js'; // or

Note: There is a very small possibility that the error is caused by something else so if you won't find such import then we need a testcase to find the reason and fix it.

Note 2: We recommend to keep our sources outside of the application project tree so that they are invisible for Angular and cannot be included in the build/transpilation process.

[NARESH.RAI]

Hello Saki,

Attaching test app which reproduce same issue with latest version - RC-1
Please check and update

[saki]

Actually, the problem was that what I described in the previous post: there were still some wrong imports in the app source. I have corrected them and adjusted package.json to copy user images during postinstall.

To make it working without change you need the following directory structure:

|
+-- bryntumtestApp
+-- gantt-4.0.0-rc-1
+-- schedulerpro-4.0.0-rc-1
|

Both routes https://localhost:4200/scheduler and https://localhost:4200/gantt work. I have not touched data either of Scheduler or Gantt.

[NARESH.RAI]

Hello Saki,

Zone js issue is resolved and app is working fine on all browsers.
Thanks for provided solution.