Getting things updated, new DI API

Author: jamesdaniels

.github/workflows/test.yml

@@ -61,7 +61,7 @@ jobs:
     needs: build
     strategy:
       matrix:
-        node: ["12", "14"]
+        node: ["12", "14", "16"]
         firebase: ["beta"]
       fail-fast: false
     name: Test firebase@${{ matrix.firebase }} on Node.js ${{ matrix.node }}
@@ -93,8 +93,8 @@ jobs:
         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
+          yarn install --frozen-lockfile --prefer-offline --ignore-engines
+          yarn add firebase@${{ matrix.firebase }} --prefer-offline --ignore-engines
       - name: Firebase emulator cache
         uses: actions/cache@v2
         with:

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"

package.json

@@ -43,16 +43,16 @@
   },
   "homepage": "https://github.com/angular/angularfire#readme",
   "dependencies": {
-    "@angular-devkit/architect": "~0.1200.0-rc.0",
-    "@angular-devkit/core": "~12.0.0-rc.0",
-    "@angular-devkit/schematics": "~12.0.0-rc.0",
-    "@angular/common": "~12.0.0-rc.0",
-    "@angular/compiler": "~12.0.0-rc.0",
-    "@angular/core": "~12.0.0-rc.0",
-    "@angular/platform-browser": "~12.0.0-rc.0",
-    "@angular/platform-browser-dynamic": "~12.0.0-rc.0",
-    "@angular/router": "~12.0.0-rc.0",
-    "firebase": "9.0.0-beta.2",
+    "@angular-devkit/architect": "^0.1200.0",
+    "@angular-devkit/core": "^12.0.0",
+    "@angular-devkit/schematics": "^12.0.0",
+    "@angular/common": "^12.0.0",
+    "@angular/compiler": "^12.0.0",
+    "@angular/core": "^12.0.0",
+    "@angular/platform-browser": "^12.0.0",
+    "@angular/platform-browser-dynamic": "^12.0.0",
+    "@angular/router": "^12.0.0",
+    "firebase": "9.0.0-beta.7",
     "firebase-admin": "^8.10.0",
     "firebase-functions": "^3.6.0",
     "firebase-tools": "^8.0.0",
@@ -63,7 +63,7 @@
     "inquirer-autocomplete-prompt": "^1.0.1",
     "lodash.isequal": "^4.5.0",
     "open": "^7.0.3",
-    "rxfire": "6.0.0-canary.da26625",
+    "rxfire": "6.0.0-canary.d3cbd88",
     "rxjs": "~6.6.0",
     "semver": "^7.1.3",
     "tslib": "^2.1.0",
@@ -76,12 +76,11 @@
     "utf-8-validate": "^5.0.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.0.0-rc.0",
-    "@angular-devkit/build-ng-packagr": ">= 0.900 < 0.1300",
-    "@angular/animations": "~12.0.0-rc.0",
-    "@angular/cli": "~12.0.0-rc.0",
-    "@angular/compiler-cli": "~12.0.0-rc.0",
-    "@angular/platform-server": "~12.0.0-rc.0",
+    "@angular-devkit/build-angular": "^12.0.0",
+    "@angular/animations": "~12.0.0",
+    "@angular/cli": "^12.0.0",
+    "@angular/compiler-cli": "^12.0.0",
+    "@angular/platform-server": "^12.0.0",
     "@types/fs-extra": "^7.0.0",
     "@types/gzip-size": "^5.1.1",
     "@types/inquirer": "^0.0.44",
@@ -106,7 +105,7 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-safarinative-launcher": "^1.1.0",
     "ncp": "^2.0.0",
-    "ng-packagr": "^10.1.0",
+    "ng-packagr": "^12.0.0",
     "pretty-size": "^2.0.0",
     "protractor": "~7.0.0",
     "reflect-metadata": "0.1.2",

sample/package.json

@@ -22,9 +22,9 @@
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.0.0",
     "@angular/router": "^12.0.0",
-    "firebase": "9.0.0-beta.2",
+    "firebase": "9.0.0-beta.7",
     "lodash.isequal": "^4.5.0",
-    "rxfire": "6.0.0-canary.da26625",
+    "rxfire": "6.0.0-canary.d3cbd88",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",
     "zone.js": "~0.11.4"

sample/src/app/app.component.ts

@@ -1,7 +1,10 @@
-import { ApplicationRef, Component, Inject, Optional } from '@angular/core';
-import { FirebaseApp, Auth, AUTH_INSTANCES, FIREBASE_APPS } from '@angular/fire';
+import { ApplicationRef, Component, Inject, NgZone, Optional } from '@angular/core';
+import { FirebaseApp, Auth, FirebaseApps, AuthInstances, FunctionsInstances,
+  Functions, FirestoreInstances, Firestore } from '@angular/fire';
 import { authState } from '@angular/fire/auth';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, distinct } from 'rxjs/operators';
+import { getApps } from '@firebase/app';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -35,14 +38,30 @@ export class AppComponent {
   constructor(
     public app: FirebaseApp,      // default Firebase App
     public auth: Auth, // default Firbase Auth
-    @Inject(FIREBASE_APPS) public apps: FirebaseApp[], // all initialized App instances
-    @Optional() @Inject(AUTH_INSTANCES) public authInstances: Auth[], // all initialized Auth instances
+    public apps: FirebaseApps, // all initialized App instances
+    public authInstances: AuthInstances, // all initialized Auth instances
+    public functions: Functions,
+    public functionsInstances: FunctionsInstances,
+    public firestore: Firestore,
+    public firestoreInstances: FirestoreInstances,
     appRef: ApplicationRef,
+    zone: NgZone,
   ) {
-    console.log(app, auth, apps, authInstances, 'hi!...');
+    console.log({app, auth, apps, authInstances, functions, functionsInstances, firestore, firestoreInstances});
     // onAuthStateChanged should destablize the zone
     // onAuthStateChanged(auth, it => console.log('onAuthStateChanged', it));
     authState(auth).subscribe(it => console.log('authState', it));
     appRef.isStable.pipe(debounceTime(200)).subscribe(it => console.log('isStable', it));
+    console.log((app as any).container.providers.keys());
+    zone.runOutsideAngular(() => {
+      setTimeout(async () => {
+        const functions = await import('./getFunctions');
+        functions.getFunctions(app);
+      }, 5000);
+      setTimeout(async () => {
+        const functions = await import('./getFunctions');
+        functions.getFunctions(app, 'asdf');
+      }, 10000);
+    });
   }
 }

sample/src/app/app.module.ts

@@ -1,12 +1,13 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { provideFirebaseApp, provideAuth } from '@angular/fire';
+import { provideFirebaseApp, provideAuth, FirestoreModule } from '@angular/fire';
 import { initializeApp, getApp } from 'firebase/app';
 import { initializeAuth, getAuth } from '@firebase/auth';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { environment } from '../environments/environment';
+import { FunctionsModule  } from '@angular/fire';
 
 @NgModule({
   declarations: [
@@ -27,6 +28,8 @@ import { environment } from '../environments/environment';
       auth.useDeviceLanguage();
       return auth;
     }),
+    FunctionsModule,
+    FirestoreModule,
   ],
   providers: [ ],
   bootstrap: [AppComponent]

sample/src/app/getFunctions.ts

@@ -0,0 +1 @@
+export { getFunctions } from 'firebase/functions';