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

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

@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.

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.

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?

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.

@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!

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 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.

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?

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

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: