Why do I get firebase namespace errors after upgrading to Angular 11

Question

I have upgraded my project from Angular 10 -> 11.

After I have done that, I get errors like this:

I have imported firebase like this:

import firebase from '@firebase/app';
import '@firebase/database';
import '@firebase/firestore';
import '@firebase/auth';
import '@firebase/analytics';
import '@firebase/functions';
import '@firebase/storage';

Example where I get an error:

const firestoreDocRefs: firebase.firestore.DocumentReference[] = [];

and

analyticsRef: firebase.analytics.Analytics;

What has changed when going from Angular 10 -> 11 and how can I get the firebase namespace to work for me again?

Answer 1

After some experimenting I found that this works:

import firebase from 'firebase/app';
import 'firebase/database';
import 'firebase/firestore';
import 'firebase/auth';
import 'firebase/analytics';
import 'firebase/functions';
import 'firebase/storage';