Angularfire: 5.3.0 not working in IE 11 due to proxy object

[musso]

Version info

Angular: 8.2.14

Firebase: 7.7.0

AngularFire: 5.3.0

Other (e.g. Ionic/Cordova, Node, browser, operating system): IE 11 in win 10

How to reproduce these conditions

Following the documentation to install Angularfire in a new angular project using 5.3.0 version. The angular will not be working in IE 11 due to proxy object introduced at angularfire/src/core/angularfire2.ts

Debug output

'Proxy' is undefined

Expected behavior

Since IE 11 should be supported in Angular supported browser, it is expected angularfire follows it. And there is no related proxy core js polyfill to fix in angular
polyfill.ts

Actual behavior

It shows a blank page with 'Proxy' is undefined error in IE 11 console. Proxy Polyfill may be a fix fyi.

[jamesdaniels]

Yeah, if you support IE 11 you'll want to polyfill. We don't ship with a polyfills... thought perhaps we can add this to the documentation.

[tayambamwanza]

@jamesdaniels Yeah I think it's a good idea, just for those who need it.

Thanks for all your hard work on this project, seriously appreciate it!

[cosminonea]

I tested this with the proxy polyfill
polyfills.ts

/***************************************************************************************************
 * APPLICATION IMPORTS
 */

import 'proxy-polyfill/proxy.min';

'Proxy' is undefined error is gone but any method call on the AngularFireAnalytics, in my case, ends up throwing TypeError: Object doesn't support property or method 'logEvent' (or whatever method I am calling)

It looks like the Analytics object is wrapped into a Proxy in all browsers but in IE it looks like a straight instance. I am not sure about the internals of AngularFireAnalytics so I can't add more information.

Any pointers as to what the problem could be, highly appreciated.

Here is the chrome instance:

And the IE 11 instance:

[jamesdaniels]

I’ll do some IE testing with the polyfill. Thanks for reporting.

[jamesdaniels]

Having now read over the limitations of the polyfill I think I understand where it might be going wrong, if I’m correct it should be a simple fix. Will update tomorrow.

[vvemuru]

Any update on this?

[JeongJun-Lee]

Same here. I built with the conf, "target": "es5" in tsconfig.json. When I open it mobile Chrome v79, "The proxy is not defined error" happens. AngularFire 6 + Angular 9

[untouch]

any updates?

[alx-andru]

Would love to contribute, @jamesdaniels if you could provide some insight?

According to an issue from the proxy-polyfill project
https://github.com/GoogleChrome/proxy-polyfill/issues/22

An object needs to have its properties defined at the time of proxy creation.

If I'm reading the implementation of AngularFireAuth correct then is extending the auth.Auth, which in turn declares methods like signInWithPopup from the firebase/auth project. .

export interface AngularFireAuth extends ɵPromiseProxy<auth.Auth> {}

@Injectable({
  providedIn: 'any'
})

Would it be the case that, if we re-declare the interface, inherited from the auth.Auth object before it is passed into the ɵlazySDKProxy and returned, that this would do the trick for the proxy-polyfill to be aware of the missing methods?

[alx-andru]

I did some local experimentation on a fork and found this to work quite reliable. As I'm not as familiar with the codebase I would appreciate some help on the solution before tackling a full PR.

If an object is passed to the elazySDKProxy containing the methods with assigned null values, these will be known to the proxy-pollyfill and allow to be invoked.

Gist with full auth.ts and highlighted changes as reference

      this.idTokenResult = this.user.pipe(
        switchMap((user) => (user ? from(user.getIdTokenResult()) : of(null)))
      );
    }

    const klass = Object.assign({ signInWithPopup: null, signOut: null }, this);

    return ɵlazySDKProxy(klass, auth, zone);
  }
}

As far as I could see, a shallow copy of the current AngularFireAuth instance would be sufficient, but I might be wrong.

Would this approach be feasible to extend to the rest of missing functions and including other modules outside of auth as well?

[rgant]

@jamesdaniels Can you provide us with an official ruling as to if AngularFire is going to support IE11 like Angular does or not?

Using a non-polyfillable Proxy in all the v6 modules means that I cannot support IE11. If that is officially something that AngularFire is not going to do then I will know I should start looking for other solutions.

Please just let us know.

[jamesdaniels]

There's a draft PR with a potential work-around #2608. I can't pull in at the moment due to the maintenance burden it would add. Every time Firebase added/changed an API we would have to re-release & juggling multiple majors+minors under a single AngularFire major would be next to impossible.

What might I be willing to pull in?

Perhaps we could add a step to our build process that would take the typescript definition from Firebase and add null properties to the class? Though how would we juggle multiple version support, union them? I'm not sure.

Or we could do something clever where the base object passed to the proxy was something pulled in through DI? So you could provide provide: PROXY_BASE_OBJECT, value: { methodIUseInIE: null, anotherMethodIUseInIE: null } or something like that?

Happy to accept a PR that doesn't add many KB to the library or greatly increases the maintenance burden...

Unfortunately I don't have the cycles to spend time on this, IE is a dead browser with declining market share & I don't personally have motivation to throw myself at it. The work-around is to use the vanilla JS SDK. As a maintainer I have an upcoming major of Angular, a new major of Firebase, and a non-trivial rewrite of the Firebase API that I have to focus my energy on... 🤷

[rgant]

It's a terrible thing having to still support IE11, but so long as Angular does then I have to.

The problem for me is that even with the polyfill my app will not even load if I import the AngularFire Modules that use Proxy. Which means I cannot even make a nice error message and request that they change browsers. My app just looks broken.

It would be helpful if there was a clear warning in the README that notes that this library now requires a real Proxy implementation to be used. Right now the only warning is statement in the upgrade documentation that falsely promises proxy polyfill support.

[jamesdaniels]

Proxy-polyfill when implemented correctly will stop the runtime exceptions, I've confirmed this recently while developing an app where I needed minimal functionality in IE11.

[rgant]

As an end user how do I implement proxy-polyfill correctly for AngularFire?

As far as I can tell these are changes that must be part of the AngularFire.

[jamesdaniels]

Make sure proxy-polyfill is added to your dependencies, in your Angular app's src/polyfills.ts include import "proxy-polyfill/proxy.min.js";. You should no longer see run-time exceptions by just including AngularFire's modules. While you won't have full functionality for AngularFire at this time due to the issues outlined above, you can fill in with the vanilla JS SDK and use our pipes for Zone.js work. It's a bit manual (and something we should support/document better) but it will get ya there. GL!

[rgant]

Unfortunately that results in errors like this:

SCRIPT5022: Exception thrown and not caught
polyfills-es5.b2cf890a430278d47e5c.js (1,127460)

Which makes the rest of my app not function.

[jamesdaniels]

I can't give you any advice on that error since it's obfuscated. Maybe run IE against your app in development mode so you can get a better idea of the errors your running into.

[jamesdaniels]

I felt inspired & confirmed that my idea was sound, if a little magic :P Now working on a patch for IE 11 proxy-polyfill support in #2633. Will cut an RC shortly and final this week.

[jamesdaniels]

6.0.5-canary.af238cd (npm i --save @angular/fire@canary) is up with prototypes added to the lazy classes to support proxy-polyfill in IE 11. In my sample app I had trouble with PerfMon and Analytics, I'll be investigating these tomorrow, but would appreciate anyone who is willing to try out the canary.

[alx-andru]

@jamesdaniels thank you so much for the updates on this! Will give it a spin and let you know.

[jamesdaniels]

Just FYI you may also need core-js and whatwg-fetch polyfills depending on the products you are using.

[schankam]

Guys, I am trying to have my application working in IE11, and I am unable to do so;

• I am running on Angular 11
• "@angular/fire": "^6.1.4"
• "firebase": "^8.0.1"

I am getting the following error:

Object doesn't support property or method 'then'"

Unhandled Promise rejection: Object doesn't support property or method 'values'
at findGtagScriptOnPage (http://xxxx.xx/firebase-analytics.js:730:20)

and when I add core-js imports, I got the following one (so I decided not including them in the end):

Unhandled Promise rejection: Cannot create property for a non-extensible object

Would it be possible to get some help ?

Here's how my polyfill.ts look like:

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

(window as any).globalThis = window;

/***************************************************************************************************
 * BROWSER POLYFILLS
 */
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';
import 'core-js/es/reflect';

/** IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 * because those flags need to be set before `zone.js` being loaded, and webpack
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
 * import './zone-flags';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
 * The following flags will work for all browsers.
 *
 * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 *  with the following flag, it will bypass `zone.js` patch for IE/Edge
 *
 *  (window as any).__Zone_enable_cross_context_check = true;
 *
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import './proxy-polyfill/proxy.min.js';

[rgant]

@schankam This is an old closed ticket. Not a great place to ask for help.

The sample app includes IE11 support: https://github.com/angular/angularfire/blob/master/sample/src/polyfills.ts

If you cannot get it working try the firebase channel of the Angular Community Discord.