feat(core): Upgrade to Firebase v9 & more (#2770)

* Support Firebase v9
* New API that Zone wraps Firebase JS SDK and rxfire
* AngularFire v6 API lives on at `@angular/fire/compat/*`
* Drop Angular versions less than 12
* Require Ivy

Author: davideast

.github/workflows/test.yml

@@ -29,9 +29,9 @@ jobs:
         id: node_modules_cache
         with:
           path: ./node_modules
-          key: ${{ runner.os }}-14-8-node_modules-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-14-beta-node_modules-${{ hashFiles('yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-14-8-node_modules-
+            ${{ runner.os }}-14-beta-node_modules-
             ${{ runner.os }}-14-node_modules-
       - name: Yarn offline cache
         if: steps.node_modules_cache.outputs.cache-hit != 'true'
@@ -62,9 +62,9 @@ jobs:
     strategy:
       matrix:
         node: ["12", "14", "16"]
-        firebase: ["7", "8"]
+        firebase: ["beta"]
       fail-fast: false
-    name: Test Firebase v${{ matrix.firebase }} on Node.js ${{ matrix.node }}
+    name: Test firebase@${{ matrix.firebase }} on Node.js ${{ matrix.node }}
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -94,7 +94,7 @@ jobs:
         run: |
           yarn config set yarn-offline-mirror ~/.npm-packages-offline-cache
           yarn install --frozen-lockfile --prefer-offline --ignore-engines
-          yarn add firebase@^${{ matrix.firebase }}.0 --prefer-offline --ignore-engines
+          yarn add firebase@${{ matrix.firebase }} --prefer-offline --ignore-engines
       - name: Firebase emulator cache
         uses: actions/cache@v2
         with:
@@ -110,10 +110,11 @@ jobs:
   headless:
     runs-on: ubuntu-latest
     needs: build
-    name: Test Firebase v${{ matrix.firebase }} on Headless Chrome
+    name: Test firebase@${{ matrix.firebase }} on ${{ matrix.browser }}
     strategy:
       matrix:
-        firebase: ["7", "8"]
+        firebase: ["beta"]
+        browser: ["chrome", "firefox"]
       fail-fast: false
     steps:
       - name: Checkout
@@ -144,7 +145,7 @@ jobs:
         run: |
           yarn config set yarn-offline-mirror ~/.npm-packages-offline-cache
           yarn install --frozen-lockfile --prefer-offline
-          yarn add firebase@^${{ matrix.firebase }}.0 --prefer-offline
+          yarn add firebase@${{ matrix.firebase }} --prefer-offline
       - name: Firebase emulator cache
         uses: actions/cache@v2
         with:
@@ -155,12 +156,62 @@ jobs:
       - name: Run tests
         run: |
           mv angularfire-${{ github.run_id }} dist
-          yarn test:chrome-headless
+          yarn test:${{ matrix.browser }}-headless
+
+#  safari:
+#    runs-on: macos-latest
+#    needs: build
+#    name: Test firebase@${{ matrix.firebase }} on safari
+#    strategy:
+#      matrix:
+#        firebase: ["beta"]
+#      fail-fast: false
+#    steps:
+#      - name: Checkout
+#        uses: actions/checkout@v2
+#      - name: Setup node
+#        uses: actions/setup-node@v2-beta
+#        with:
+#          node-version: '14'
+#          check-latest: true
+#      - name: node_modules cache
+#        id: node_modules_cache
+#        uses: actions/cache@v2
+#        with:
+#          path: ./node_modules
+#          key: ${{ runner.os }}-14-${{ matrix.firebase }}-node_modules-${{ hashFiles('yarn.lock') }}
+#          restore-keys: |
+#            ${{ runner.os }}-14-${{ matrix.firebase }}-node_modules-
+#            ${{ runner.os }}-14-node_modules-
+#      - name: Yarn offline cache
+#        if: steps.node_modules_cache.outputs.cache-hit != 'true'
+#        uses: actions/cache@v2
+#        with:
+#          path: ~/.npm-packages-offline-cache
+#          key: yarn-offline-${{ hashFiles('**/yarn.lock') }}
+#          restore-keys: yarn-offline
+#      - name: Install deps
+#        if: steps.node_modules_cache.outputs.cache-hit != 'true'
+#        run: |
+#          yarn config set yarn-offline-mirror ~/.npm-packages-offline-cache
+#          yarn install --frozen-lockfile --prefer-offline
+#          yarn add firebase@${{ matrix.firebase }} --prefer-offline
+#      - name: Firebase emulator cache
+#        uses: actions/cache@v2
+#        with:
+#          path: ~/.cache/firebase/emulators
+#          key: firebase_emulators
+#      - name: 'Download Artifacts'
+#        uses: actions/download-artifact@v2
+#      - name: Run tests
+#        run: |
+#          mv angularfire-${{ github.run_id }} dist
+#          yarn test:safari
 
   publish:
     runs-on: ubuntu-latest
     name: Publish (NPM)
-    needs: ['test', 'headless']
+    needs: ['build', 'test', 'headless']
     if: ${{ github.ref == 'refs/heads/master' || github.event_name == 'release' }}
     steps:
       - name: Setup node

.gitignore

@@ -19,7 +19,11 @@ tools/build.js
 coverage
 *.log
 api-*.json
-src/**/base.ts
 angularfire.tgz
 unpack.sh
-publish.sh
+publish.sh
+
+# auto-gen files
+src/compat/**/base.ts
+src/**/rxfire.ts
+src/**/firebase.ts

.npmignore

@@ -1,3 +1,7 @@
 *.spec.*
 test-config.*
-publish.sh
+publish.sh
+__ivy_ngcc__/
+*.min.js
+*.min.js.map
+*.__ivy_ngcc_bak

README.md

@@ -1,7 +1,7 @@
 # AngularFire
 The official [Angular](https://angular.io/) library for [Firebase](https://firebase.google.com/).
 
-<strong><pre>ng add @angular/fire</pre></strong>
+<strong><pre>ng add @angular/fire@next</pre></strong>
 
 AngularFire smooths over the rough edges an Angular developer might encounter when implementing the framework-agnostic [Firebase JS SDK](https://github.com/firebase/firebase-js-sdk) & aims to provide a more natural developer experience by conforming to Angular conventions.
 
@@ -14,13 +14,25 @@ AngularFire smooths over the rough edges an Angular developer might encounter wh
 - **Google Analytics** - Zero-effort Angular Router awareness in Google Analytics
 - **Router Guards** - Guard your Angular routes with built-in Firebase Authentication checks
 
+---
+
+> **WARNING**: This branch is the work in progress for version 7 of AngularFire. [You can find version 6 here](https://github.com/angular/angularfire/tree/v6), if you're looking for documentation or to contribute to stable.
+
+---
+
 ## Example use
 
 ```ts
 import { Component } from '@angular/core';
-import { AngularFirestore } from '@angular/fire/firestore';
+import { Firestore, collectionData, collection } from '@angular/fire/firestore';
 import { Observable } from 'rxjs';
 
+interface Item {
+  id: string,
+  name: string,
+  ...
+};
+
 @Component({
   selector: 'app-root',
   template: `
@@ -32,9 +44,10 @@ import { Observable } from 'rxjs';
   `
 })
 export class MyApp {
-  item$: Observable<any[]>;
-  constructor(firestore: AngularFirestore) {
-    this.item$ = firestore.collection('items').valueChanges();
+  item$: Observable<Item[]>;
+  constructor(firestore: Firestore) {
+    const collection = collection(firestore, 'items');
+    this.item$ = collectionData(collection, 'id');
   }
 }
 ```
@@ -47,7 +60,7 @@ AngularFire doesn't follow Angular's versioning as Firebase also has breaking ch
 
 | Angular | Firebase | AngularFire  |
 | --------|----------|--------------|
-| 12      | [9 <sup>beta</sup>](https://firebase.google.com/docs/web/learn-more#modular-version) | [^7.0 <sup>beta</sup>](https://github.com/angular/angularfire/tree/exp) |
+| 12      | [9 <sup>beta</sup>](https://firebase.google.com/docs/web/learn-more#modular-version) | ^7.0 <sup>beta</sup> |
 | 12      | 7,8      | ^6.1.5       |
 | 11      | 7,8      | ^6.1         |
 | 10      | 8        | ^6.0.4       |
@@ -79,7 +92,7 @@ Neither AngularFire or Firebase ship with polyfills. To have compatability acros
 
 [Stackblitz Template](https://stackblitz.com/edit/angular-fire-start) - Remember to set your Firebase configuration in `app/app.module.ts`.
 
-[Upgrading to v6.0? Check out our guide.](docs/version-6-upgrade.md)
+[Upgrading to v7.0? Check out our guide.](docs/version-7-upgrade.md)
 
 **Having troubles?** Get help on our [Q&A board](https://github.com/angular/angularfire/discussions?discussions_q=category%3AQ%26A), the official [Firebase Mailing List](https://groups.google.com/forum/#!forum/firebase-talk), the [Firebase Community Slack](https://firebase.community/) (`#angularfire2`), the [Angular Community Discord](http://discord.gg/angular) (`#firebase`), [Gitter](https://gitter.im/angular/angularfire2), the [Firebase subreddit](https://www.reddit.com/r/firebase), or [Stack Overflow](https://stackoverflow.com/questions/tagged/angularfire2).
 

angular.json

@@ -10,7 +10,7 @@
       "prefix": "angularfire",
       "architect": {
 	"build": {
-	  "builder": "@angular-devkit/build-ng-packagr:build",
+	  "builder": "@angular-devkit/build-angular:ng-packagr",
 	  "options": {
 	    "tsConfig": "tsconfig.json",
 	    "project": "src/package.json"
@@ -41,6 +41,7 @@
   },
   "defaultProject": "angularfire",
   "cli": {
+	"packageManager": "yarn",
     "analytics": "86795b8f-9036-4a53-929c-a7303453d677"
   }
 }

docs/analytics/getting-started.md

@@ -27,7 +27,7 @@ CONFIG = InjectionToken<Config>;
 ### Usage:
 
 ```ts
-import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
+import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics';
 
 @NgModule({
   imports: [
@@ -43,7 +43,7 @@ export class AppModule { }
 In your component you can then dependency inject `AngularFireAnalytics` and make calls against the SDK:
 
 ```ts
-import { AngularFireAnalytics } from '@angular/fire/analytics';
+import { AngularFireAnalytics } from '@angular/fire/compat/analytics';
 
 constructor(analytics: AngularFireAnalytics) {
   analytics.logEvent('custom_event', { ... });
@@ -55,7 +55,7 @@ constructor(analytics: AngularFireAnalytics) {
 You can log [`screen_view` events](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html#parameters_10) yourself of course, but AngularFire provides the `ScreenTrackingService` which automatically integrates with the Angular Router to provide Firebase with screen view tracking. You simply can integrate like so:
 
 ```ts
-import { AngularFireAnalyticsModule, ScreenTrackingService } from '@angular/fire/analytics';
+import { AngularFireAnalyticsModule, ScreenTrackingService } from '@angular/fire/compat/analytics';
 
 @NgModule({
   imports: [
@@ -77,7 +77,7 @@ To enrich your Analytics data you can track the currently signed in user by sett
 
 
 ```ts
-import { AngularFireAnalyticsModule, UserTrackingService } from '@angular/fire/analytics';
+import { AngularFireAnalyticsModule, UserTrackingService } from '@angular/fire/compat/analytics';
 
 @NgModule({
   imports: [
@@ -100,7 +100,7 @@ export class AppModule { }
 Using the `CONFIG` DI Token (*default: {}*) will allow you to configure Google Analytics. E.g, you could skip sending the initial `page_view` event, anonymize IP addresses, and disallow ads personalization signals for all events like so:
 
 ```ts
-import { AngularFireAnalyticsModule, CONFIG } from '@angular/fire/analytics';
+import { AngularFireAnalyticsModule, CONFIG } from '@angular/fire/compat/analytics';
 
 @NgModule({
   imports: [

docs/auth/getting-started.md

@@ -10,7 +10,7 @@ the Firebase docs for more information on what methods are available.](https://f
 
 ```ts
 import { Component } from '@angular/core';
-import { AngularFireAuth } from '@angular/fire/auth';
+import { AngularFireAuth } from '@angular/fire/compat/auth';
 import firebase from 'firebase/app';
 
 @Component({

docs/auth/router-guards.md

@@ -3,7 +3,7 @@
 `AngularFireAuthGuard` provides a prebuilt [`canActivate` Router Guard](https://angular.io/api/router/CanActivate) using `AngularFireAuth`. By default unauthenticated users are not permitted to navigate to protected routes:
 
 ```ts
-import { AngularFireAuthGuard } from '@angular/fire/auth-guard';
+import { AngularFireAuthGuard } from '@angular/fire/compat/auth-guard';
 
 export const routes: Routes = [
     { path: '',      component: AppComponent },
@@ -29,7 +29,7 @@ The `auth-guard` module provides the following pre-built pipes:
 Example use:
 
 ```ts
-import { AngularFireAuthGuard, hasCustomClaim, redirectUnauthorizedTo, redirectLoggedInTo } from '@angular/fire/auth-guard';
+import { AngularFireAuthGuard, hasCustomClaim, redirectUnauthorizedTo, redirectLoggedInTo } from '@angular/fire/compat/auth-guard';
 
 const adminOnly = () => hasCustomClaim('admin');
 const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
@@ -48,7 +48,7 @@ export const routes: Routes = [
 Use the provided `canActivate` helper and spread syntax to make your routes more readable:
 
 ```ts
-import { canActivate } from '@angular/fire/auth-guard';
+import { canActivate } from '@angular/fire/compat/auth-guard';
 
 export const routes: Routes = [
     { path: '',             component: AppComponent },
@@ -76,7 +76,7 @@ The `auth-guard` modules provides a `customClaims` operator to reduce boiler pla
 ```ts
 import { pipe } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { customClaims } from '@angular/fire/auth-guard';
+import { customClaims } from '@angular/fire/compat/auth-guard';
 
 // This pipe will only allow users with the editor role to access the route
 // { path: 'articles/:id/edit', component: ArticleEditComponent, ...canActivate(editorOnly) }
@@ -90,7 +90,7 @@ const editorOnly = () => pipe(customClaims, map(claims => claims.role === 'edito
 ```ts
 import { pipe } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { customClaims } from '@angular/fire/auth-guard';
+import { customClaims } from '@angular/fire/compat/auth-guard';
 
 // Only allow navigation to the route if :userId matches the authenticated user's uid
 // { path: 'user/:userId/edit', component: ProfileEditComponent, ...canActivate(onlyAllowSelf) }

docs/deploy/getting-started.md

@@ -11,7 +11,7 @@ In this guide, we'll look at how to use `@angular/fire` to automatically deploy
 First, you need to add the `@angular/fire` package to your project. In your Angular CLI project run:
 
 ```shell
-ng add @angular/fire
+ng add @angular/fire@next
 ```
 
 *Note that the command above assumes you have global Angular CLI installed. To install Angular CLI globally run `npm i -g @angular/cli`.*
@@ -53,7 +53,7 @@ In the end, your `angular.json` project will look like below:
 If you want to add deployment capabilities to a different project in your workspace, you can run:
 
 ```
-ng add @angular/fire --project=[PROJECT_NAME]
+ng add @angular/fire@next --project=[PROJECT_NAME]
 ```
 
 ## Step 2: deploying the project

docs/emulators/emulators.md

@@ -69,10 +69,10 @@ Each module (database, firestore, auth, function) provides `USE_EMULATOR` token
 Import these tokens at your `app.module.ts` as follow:
 
 ```ts
-import { USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/auth';
-import { USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/database';
-import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/firestore';
-import { USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '@angular/fire/functions';
+import { USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/compat/auth';
+import { USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/compat/database';
+import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/compat/firestore';
+import { USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '@angular/fire/compat/functions';
 
 @NgModule({
   // ... Existing configuration
@@ -93,7 +93,7 @@ Also you can opt-in the new way of setting the Cloud Functions [origin](https://
 
 ```ts
 import { isDevMode, NgModule } from '@angular/core';
-import { ORIGIN as FUNCTIONS_ORIGIN, NEW_ORIGIN_BEHAVIOR } from '@angular/fire/functions';
+import { ORIGIN as FUNCTIONS_ORIGIN, NEW_ORIGIN_BEHAVIOR } from '@angular/fire/compat/functions';
 
 @NgModule({
   // ... Existing configuration
@@ -111,9 +111,9 @@ export class AppModule { }
 With the exception of the Auth Emulator, the old way of setting the `host` and `port` for each emulator was done using a different set of tokens by passing the entire url path as string.
 
 ```ts
-import { URL as DATABASE_URL } from '@angular/fire/database';
-import { ORIGIN as FUNCTIONS_ORIGIN } from '@angular/fire/functions';
-import { SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/firestore';
+import { URL as DATABASE_URL } from '@angular/fire/compat/database';
+import { ORIGIN as FUNCTIONS_ORIGIN } from '@angular/fire/compat/functions';
+import { SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/compat/firestore';
 
 @NgModule({
   // ... Existing configuration