zone.js can't patch XHR requests on IE11

[kmaraz]

🐞 bug report

Affected Package

The issue is caused by package zone.js@0.11.1

Is this a regression?

Yes, the previous version in which this bug was not present was: 0.10.3

Description

This error occurs on IE11 when zone.js tries to patch any XHR requests.

🔬 Minimal Reproduction

🔥 Exception or Error

Error message is

"Invalid calling object"

Stacktrace

at scheduleTask (https://mypage/static/npm.zone.js.4a7cc42837185b0e9a27.js:3359:9)
at scheduleTask (https://mypage/static/npm.zone.js.4a7cc42837185b0e9a27.js:503:15)
at onScheduleTask (https://mypage/static/npm.zone.js.4a7cc42837185b0e9a27.js:390:9)
at scheduleTask (https://mypage/static/npm.zone.js.4a7cc42837185b0e9a27.js:498:13)

🌍 Your Environment

Angular Version:
I am using custom Webpack configuration. All the packages are current latest version 10.0.11.

[BdDragos]

I also have the same error, reverting back to 0.10.3 from 0.11.1 fixed it. It was caught by my error interceptor as a "Server Side error":

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        let errorMessage = '';
        let displayedMessage = '';
        if (error.error instanceof ErrorEvent) {
          // client-side error
          errorMessage = `Error: ${error.error.message}`;
          displayedMessage = 'Request to server failed - Client-side';
        } else {
          // server-side error
          errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
          displayedMessage = 'Request to server failed - Code ' + error.status;
        }
        return throwError(errorMessage);
      })
    );
}

[JiaLiPassion]

@kmaraz, I can not reproduce this issue, could you provide a reproduce repo? thanks.

[kmaraz]

@JiaLiPassion here: https://github.com/kmaraz/zonejs-demo
Hope it helps. I am able to reproduce this with this minimal demo.

[kmaraz]

Maybe related: Also I am using blacklist.ts to create new Zone which doesn't work anymore:

const BLACKLISTED_ZONE_EVENTS: string[] = [
  // Global events
  'addEventListener:mouseenter',
  'addEventListener:mouseleave',
  'addEventListener:mouseout',
  'addEventListener:mouseover',
  'addEventListener:mousewheel',
  'addEventListener:scroll',
  'addEventListener:wheel',
  'addEventListener:resize',
  'addEventListener:orientationchange',
  // Chart.js
  'addEventListener:pointermove',
  // Animations
  'requestAnimationFrame',
  // Websockets
  'WebSocket.addEventListener:close',
  'WebSocket.addEventListener:error',
  'WebSocket.addEventListener:open',
  'WebSocket.addEventListener:message'
];

export const blacklistZone = Zone.current.fork({
  name: 'blacklist',
  onScheduleTask: (delegate: ZoneDelegate, _current: Zone, target: Zone, task: Task): Task => {
    if (
      // Block events
      task.type === 'eventTask' && BLACKLISTED_ZONE_EVENTS.some((name) => task.source.includes(name))
    ) {
      task.cancelScheduleRequest();
      return Zone.root.scheduleTask(task);
    }
    return delegate.scheduleTask(target, task);
  }
});

Because Zone, ZoneDelegate and Task are unrecognized.

[JiaLiPassion]

@kmaraz , the repo https://github.com/kmaraz/zonejs-demo only contains some config files, could you post a workable repo?

[kmaraz]

@JiaLiPassion sorry, it is updated now.

[JiaLiPassion]

@kmaraz, thanks for the sample, this is not a bug since zone.js 0.11.1 is a major update with breaking change since from 0.11.1, zone.js change the dist bundle format to Angular Package Format, and your project is not generated with Angular CLI, so it will not work in IE 11 without update the webpack config, since currently Angular 10 is still using zone.js 0.10.3, so please don't update to zone.js 0.11.1 if you are not using Angular CLI. I will update the document to describe about this.

And for now, the walk around is, update app.module.ts to update
import zone.js' to import 'zone.js/bundles/zone.umd';`

Thanks for reporting the issue.

[sir-captainmorgan21]

@JiaLiPassion why would app.module.ts be importing from zone.js? Do you mean polyfills.ts? Also, we are using angular cli, and it is pointing to 'zone.js/dist/zone'

[JiaLiPassion]

@sir-captainmorgan21 , sure, if the project is created by Angular CLI, zone.js is imported in polyfills.ts, and also if the project is Angular CLI project, after updating to zone.js 0.11.x, it will still work.

The issue here https://github.com/kmaraz/zonejs-demo is not an Angular CLI project, the zone.js is imported in app.module.ts and the syntax there is import 'zone.js';, and this syntax become a breaking change since zone.js 0.11.x now is Angular package format, and import 'zone.js' will load zone bundles for evergreen browsers and not loading packages for legacy browsers such as IE

[kmaraz]

Off topic:

since zone.js 0.11.1 is a major update with breaking change

It would be nice if zone.js would follow semver. How it is possible that major version didn't change but it is a breaking change. I'd never guessed that.

[JiaLiPassion]

@kmaraz, yeah, you are right, I understand your point, but since the major version of zone.js is still 0 and it may keep that way for a long time, so now we use the minor version to identify the breaking changes.

[JiaLiPassion]

@kmaraz, I just made another PR to fix this issue, zone.js 0.11 should have better backward compatibility, although in your case it is still a breaking change since

import 'zone.js';

syntax will load different module in 0.11.x (es2015 module) than 0.10.x (es5 module), I will add doc to explain it.

please wait for the next release 0.11.2.

[pawelwaszczynski-efx]

Can I use latest zone.js with Angular 8 ? I have the same issue with Invalid calling object and I'm experimenting with different zone.js versions.

[JiaLiPassion]

@pxw84 , sure, you can use the lastest version with Angular 8, but currently the 0.11.1 has a unintended breaking change, the issue has been fixed, please wait for 0.11.2, it will be release very soon.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}