JSONP call fails in Internet Explorer 11 and Google Maps API

🐞 bug report

Affected Package

The issue is caused by package @angular/common.

And it is related to @angular/google-maps.

Is this a regression?

I’m not sure. This is the first time for me trying to implement a JSONP call to the Google Maps API in Angular and support Internet Explorer 11.

Description

A JSONP call to the Google Maps API fails in Internet Explorer 11 while it works fine in other browsers.

I followed this guide: https://github.com/angular/components/tree/master/src/google-maps#lazy-loading-the-api

JSONP calls only fail in Internet Explorer with the Google Maps API. I tried other JSONP endpoints, and they seem to work fine. So, if you think this is not an Angular issue, this bug needs to taken to the Google Maps API I guess.

🔬 Minimal Reproduction

I created a demo repository here: https://github.com/sebastianhaeni/angular-jsonp-bug

Unfortunately it cannot be reproduced on stackblitz because it needs a full prod build, so IE 11 can execute the JavaScript (ES5 and polyfills needed).

My hunch is that it’s somehow a problem with the lifecycle of the JSONP callback function on the window object, which is maybe removed too early.

🔥 Exception or Error

Unhandled Promise rejection: ng_jsonp_callback_0 is not a function ; Zone: <root> ; Task: Promise.then ; Value: InvalidValueError: ng_jsonp_callback_0 is not a function undefined

🌍 Your Environment

Angular Version:

Angular CLI: 10.0.8
Node: 12.18.1
OS: darwin x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cli                      10.0.8
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Anything else relevant?

Specific browser version:

• Internet Explorer 11
• Version: 11.3986.14393.0
• Update Versions: 11.0.210

[JiaLiPassion]

@sebastianhaeni, I just debug the case, and in IE11, Angular is using core-js promise as polyfill, and the microTask scheduler is MutationObserver not setTimeout, but your analysis is correct.

1. in IE11, the script onload event is fired before Promise.then.
2. in modern browsers, the script onload event is fired after Promise.then since they are using native promise.then as scheduler.

So I would suggest not using setTimeout, you can try using Promise.resolve().then() in onload event handler to delay the onload execution.

[angular-automatic-lock-bot[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.}