"Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten

[taruntadikonda]

There is error when exceljs is used in code.

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.)"
Angular 5
o exceljs.min.js:3

My service.ts file

import { Injectable } from '@angular/core';
import * as Excel from "exceljs/dist/exceljs.min.js";
import * as fs from 'file-saver';
@Injectable({
providedIn: 'root'
})
export class ExcelserviceService {

constructor() { }

generatereport(dummydata):void{

let workbook = new Excel.Workbook();

let worksheet = workbook.addWorksheet('Car Data');

}
}

[bleuscyther]

Duplicate of #984

[nvkolluru]

I am able to make it work in local by removing zone.js imports from polyfills.ts file and adding them to main.ts at the end. But, having same ZoneAwarePromise issue again after build and publish. Any updates ?

[bleuscyther]

No solutions worked for me i saw some old libraries with this issue, i could not see exactly what they changed to fix it ( 2017-18)

[nvkolluru]

Made it work for the normal build (ng build), but for PROD Build - no luck yet.

[inyourdrimz]

fixed mine by importing it before 'core-js' and 'zone.js' in the pollyfills.ts file

pollyfills.ts file:

import 'exceljs/dist/exceljs.min.js';

/** IE9, IE10 and IE11 requires all of the following polyfills. */
import 'core-js/es6/symbol';
.
.
. 
.
.
.
import 'zone.js/dist/zone';

[bleuscyther]

fixed mine by importing it before 'core-js' and 'zone.js' in the pollyfills.ts file

pollyfills.ts file:

import 'exceljs/dist/exceljs.min.js';

/** IE9, IE10 and IE11 requires all of the following polyfills. */
import 'core-js/es6/symbol';
.
.
. 
.
.
.
import 'zone.js/dist/zone';

I do not include 'core-js', but your comment made me realise something, the conflict is with core-js, most likely this library is trying to work with old browsers and importing polyfills. angular/zone.js#783

and this particular solution is provided here: angular/zone.js#783 (comment)

In order for this to work anyone who is loading excelJs in the component/service should remove the imports and only
Remove these everywhere except in polyfill.ts
import * as ExcelJS from 'exceljs/dist/exceljs.min.js';
don t use new Excel.Workbook()

So the final code will be :

import {Row, Workbook, Worksheet} from 'exceljs';
...
    const workbook: Workbook = new Workbook();

    const sheet: Worksheet = workbook.addWorksheet( ....

Extra:
you don't need @types/exceljs anymore.
I did test adding it to angular.json>project.architect.build.options.scripts instead of polyfill but it fails

[bleuscyther]

I could not pinpoint what is calling core-js or es5-polyfills , but something is. According to this we should add it manually but something is definitely still adding a polyfill for Promise

Note: The ES5 build has an implicit dependency on a number of polyfills which are no longer explicitly added by exceljs. You will need to add "core-js" and "regenerator-runtime" to your dependencies and include the following requires in your code before the exceljs import:

[inyourdrimz]

I do not include 'core-js'

you're right, tried to move it after the 'core-js' imports but before zone.js and it still works..

something is definitely still adding a polyfill for Promise

hmnn i browse the exceljs.js file and found this line of code..

....this might be it? ( i'm just guessing here )

[bleuscyther]

Oh so the polyfill for Promise is actually embedded in the code.

[nvkolluru]

@bleuscyther , I am still having zoneawarepromise error even after I import exceljs into polyfills. Any idea?

[Arios509]

This one when tried, only version 2.0.1 is working. Right now the 3.0 version is running, any plan that will fix for this issues?

[nvkolluru]

I have tried different versions. It's working on 2.0.1 and for higher versions, you may need to add zone.js imports in main.ts instead of polyfills file but that's not a good idea and may cause issues during builds.

For Esceljs- 2.0.1
No extra babel-polyfill are necessary for index.html
add
"paths": {
"exceljs": ["/node_modules/exceljs/dist/exceljs.min"]
}
in tsconfig.json
add
"node_modules/exceljs/dist/exceljs.min.js" in scripts for angular.json

import * as ExcelJS from 'exceljs/dist/exceljs.min.js';
declare const ExcelJS: ExcelJS;
...
....
var workbook = new ExcelJS.Workbook();
....

It's working on both DEV and PROD builds without any issues.

[inyourdrimz]

It's working on 2.0.1 and for higher versions, you may need to add zone.js imports in main.ts instead of polyfills

uhh no (at-least for me)?? i'm using the latest version 3.3.1 and i only need to import it before the zone.js at the pollyfills.ts file, then that's it:

import * as ExcelJS from 'exceljs';

let workbook = new ExcelJS.Workbook();

my angular version is 7.2.3

[bleuscyther]

I suggested a PR that should fix this issue. You can download it and build to test the excelis.min files.

It worked for me i did not need to import in the polyfill.ts anymore.

import {Row, Workbook, Worksheet} from 'exceljs';
...
    const workbook: Workbook = new Workbook();

    const sheet: Worksheet = workbook.addWorksheet( ....