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
GoogleChrome/proxy-polyfill#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?