[ANGULAR] Library importing errors

[Giovanni Pini]

I'm trying to use library version 3.0.4 in Angular 8.

1) I used to import it as "scripts" array of angular.json file but, when run on Firefox, I obtain this error:

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.)

2) If I move the import from angular.json directly to the components as described in the documentation
import { Scheduler } from '../scheduler/build/scheduler.module.js';
Everything is working fine unless I compile on SSR and I obtain this error when I try to run the server side code:

ReferenceError: self is not defined
    at Module../libs/scheduler/build/scheduler.module.js (/Users/giovannipini/Documents/VZC/fsd.ui/dist/server.js:146751:38)
    at __webpack_require__ (/Users/giovannipini/Documents/VZC/fsd.ui/dist/server.js:146425:30)
    at Object../src/app/scheduling/modules/scheduler-widget/services/bryntum-popup-manager.service.ts (/Users/giovannipini/Documents/VZC/fsd.ui/dist/server.js:350690:31)
    at __webpack_require__ (/Users/giovannipini/Documents/VZC/fsd.ui/dist/server.js:146425:30)
    at Object../src/app/scheduling/modules/scheduler-widget/services/index.ts (/Users/giovannipini/Documents/VZC/fsd.ui/dist/server.js:350932:22)
    at __webpack_require__ (/Users/giovannipini/Documents/VZC/fsd.ui/dist/server.js:146425:30)
    at Object../src/app/scheduling/modules/scheduler-widget/components/bryntum-scheduler/bryntum-scheduler.component.ts (/Users/giovannipini/Documents/VZC/fsd.ui/dist/server.js:348387:20)
    at __webpack_require__ (/Users/giovannipini/Documents/VZC/fsd.ui/dist/server.js:146425:30)
    at Object../src/app/scheduling/modules/scheduler-widget/components/bryntum-scheduler/bryntum-scheduler.component.ngfactory.js (/Users/giovannipini/Documents/VZC/fsd.ui/dist/server.js:348303:12)
    at __webpack_require__ (/Users/giovannipini/Documents/VZC/fsd.ui/dist/server.js:146425:30)

Line that is not working in the server.js file is

/*

Bryntum Scheduler 3.0.4
Copyright(c) 2020 Bryntum AB
https://bryntum.com/contact
https://bryntum.com/license

*/
const productName = 'scheduler';

var support = {
  searchParams: 'URLSearchParams' in self,
  iterable: 'Symbol' in self && 'iterator' in Symbol,
  blob:
    'FileReader' in self &&
    'Blob' in self &&
    (function() {
      try {
        new Blob();
        return true
      } catch (e) {
        return false
      }
    })(),
  formData: 'FormData' in self,
  arrayBuffer: 'ArrayBuffer' in self
};

Can you please investigate? Let me know if you need further information

[pmiklashevich]

Could you please attach a small runnable test case that we can explore?

[Giovanni Pini]

I added 2 examples. In both cases I did not create an angular component, but I have just used a simple constructor. The result is the same.

1) bryntum-import-angularjson.zip contains an example of first problem, importing in angular.json. Just run:

npm install
ng serve

Then open localhost:4200 in Firefox

2) bryntum-import-ssr.zip contains an example of second problem, importing as in documentation adding only SSR (as described in https://angular.io/guide/universal). Just run

npm install
npm run build:ssr
npm run serve:ssr

The error is thrown in console

[saki]

Re importing our library from angular.json:

1. comment out line
   // import 'zone.js/dist/zone';  // Included with Angular CLI.

   in `app/polyfills.ts`
2. add line
   import 'zone.js/dist/zone';

   to `main.ts` after other imports so that it reads:
   // ...
   import { AppModule } from './app/app.module';
   import { environment } from './environments/environment';
   
   import 'zone.js/dist/zone';
   
   if (environment.production) {
     enableProdMode();
   // ...
   

   Re SSR: We need to investigate it and we consider to prepare a demo with SSR https://github.com/bryntum/support/issues/363