如何将 firebase.auth 导入到 angular 10

Question

I have been using firebase for several years, and how to import it properly has always been a mystery to me. I have been doing this:

import { auth } from 'firebase/app';
const p = new auth.GoogleAuthProvider();
this._angularfireauth.signInWithRedirect(p);

After upgrade to Angular 10, I got warnings

depends on firebase/app. CommonJS or AMD dependencies can cause optimization bailouts.

I suppose it means firebase/app is a commonJS module. What can I do with it? It seems that the alternative

import * as firebase from 'firebase/app';
const p = new firebase.auth.GoogleAuthProvider();
this._angularfireauth.signInWithRedirect(p);

is just as bad.

What is the proper way to do this?

Answer 1

The npm package firebase itself is not an ECMAScript module and therefore produces the warning.

If there is no ES modulized build available for your library, or if you for some reason don't care, you can add can allow specific CommonJS dependencies in the angular.json file:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // ...
    "allowedCommonJsDependencies": ["firebase/app"]
  }