vNext WIP

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/fire",
-  "version": "6.1.4",
+  "version": "0.700.0",
   "description": "The official Angular library for Firebase.",
   "private": true,
   "scripts": {
@@ -49,7 +49,7 @@
     "@angular/platform-browser": "^9.0.0 || ^10.0.0 || ^11.0.0",
     "@angular/platform-browser-dynamic": "^9.0.0 || ^10.0.0 || ^11.0.0",
     "@angular/router": "^9.0.0 || ^10.0.0 || ^11.0.0",
-    "firebase": "^7.0 || ^8.0",
+    "firebase": "^0.900.4",
     "firebase-admin": "^8.10.0",
     "firebase-functions": "^3.6.0",
     "firebase-tools": "^8.0.0",

sample/.browserslistrc

@@ -9,5 +9,4 @@
 last 2 versions
 Firefox ESR
 not dead
-not IE 9-10
-IE 11
+not IE 9-10

sample/package.json

@@ -30,16 +30,17 @@
     "@angular/service-worker": "^11.0.0",
     "@nguniversal/express-engine": "~10.1.0",
     "core-js": "^3.6.5",
-    "firebase": "^8.0.0",
+    "firebase": "^0.900.4",
     "first-input-delay": "^0.1.3",
     "proxy-polyfill": "^0.3.2",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.1",
+    "webpack": "^5.0.0",
     "whatwg-fetch": "^3.4.1",
     "zone.js": "0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "~0.1001.3",
+    "@angular-devkit/architect": "~0.1100.0",
     "@angular-devkit/build-angular": "~0.1100.0",
     "@angular/cli": "~11.0.0",
     "@angular/compiler-cli": "~11.0.0",
@@ -70,5 +71,8 @@
     "ts-node": "~9.0.0",
     "tslint": "~6.1.3",
     "typescript": "~4.0.5"
+  },
+  "resolutions": {
+    "webpack": "^5.0.0"
   }
 }

sample/server.ts

@@ -15,7 +15,8 @@ global['WebSocket'] = require('ws');
 /* tslint:enable:no-string-literal */
 
 // include the protos required to bundle firestore
-import 'dir-loader!./firestore-protos';
+// in webpack 5 this is failing
+// import 'dir-loader!./firestore-protos';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app() {
@@ -36,7 +37,7 @@ export function app() {
   // Serve static files from /browser
   server.get('*.*', express.static(distFolder, {
     maxAge: '1y'
-  }));
+  }) as any);
 
   // All regular routes use the Universal engine
   server.get('*', (req, res) => {

sample/src/app/app-routing.module.ts

@@ -10,16 +10,16 @@ const routes: Routes = [
   { path: '', component: SecondaryComponent, outlet: 'secondary', pathMatch: 'prefix' },
   { path: '', component: SecondaryComponent, outlet: 'tertiary', pathMatch: 'prefix' },
   { path: 'protected', component: ProtectedComponent, canActivate: [AngularFireAuthGuard] },
-  { path: 'lazy', loadChildren: () => import('./protected-lazy/protected-lazy.module').then(m => m.ProtectedLazyModule) },
-  { path: 'protected-lazy',
-    loadChildren: () => import('./protected-lazy/protected-lazy.module').then(m => m.ProtectedLazyModule),
-    canActivate: [AngularFireAuthGuard] },
+//  { path: 'lazy', loadChildren: () => import('./protected-lazy/protected-lazy.module').then(m => m.ProtectedLazyModule) },
+//  { path: 'protected-lazy',
+//    loadChildren: () => import('./protected-lazy/protected-lazy.module').then(m => m.ProtectedLazyModule),
+//    canActivate: [AngularFireAuthGuard] },
   { path: 'protected', component: ProtectedComponent, canActivate: [AngularFireAuthGuard], outlet: 'secondary' },
   { path: 'protected', component: ProtectedComponent, canActivate: [AngularFireAuthGuard], outlet: 'tertiary' },
-  { path: 'protected-lazy',
-    loadChildren: () => import('./protected-lazy/protected-lazy.module').then(m => m.ProtectedLazyModule),
-    ...canActivate(() => isNotAnonymous),
-    outlet: 'secondary' },
+//  { path: 'protected-lazy',
+//    loadChildren: () => import('./protected-lazy/protected-lazy.module').then(m => m.ProtectedLazyModule),
+//    ...canActivate(() => isNotAnonymous),
+//    outlet: 'secondary' },
 ];
 
 @NgModule({

sample/src/app/app.module.ts

@@ -8,48 +8,45 @@ import { environment } from '../environments/environment';
 
 import { AngularFireModule } from '@angular/fire';
 
-import {
+/*import {
   AngularFireAnalyticsModule,
   APP_NAME,
   APP_VERSION,
   DEBUG_MODE as ANALYTICS_DEBUG_MODE,
   ScreenTrackingService,
   UserTrackingService,
   COLLECTION_ENABLED
-} from '@angular/fire/analytics';
+} from '@angular/fire/analytics';*/
 
 import { FirestoreComponent } from './firestore/firestore.component';
-import { AngularFireDatabaseModule, USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/database';
+// import { AngularFireDatabaseModule, USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/database';
 import { AngularFirestoreModule, USE_EMULATOR as USE_FIRESTORE_EMULATOR, SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/firestore';
-import { AngularFireStorageModule } from '@angular/fire/storage';
+// import { AngularFireStorageModule } from '@angular/fire/storage';
 import { AngularFireAuthModule, USE_DEVICE_LANGUAGE, USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/auth';
-import { AngularFireMessagingModule, SERVICE_WORKER, VAPID_KEY } from '@angular/fire/messaging';
-import { AngularFireFunctionsModule, USE_EMULATOR as USE_FUNCTIONS_EMULATOR, ORIGIN as FUNCTIONS_ORIGIN, NEW_ORIGIN_BEHAVIOR } from '@angular/fire/functions';
+// import { AngularFireMessagingModule, SERVICE_WORKER, VAPID_KEY } from '@angular/fire/messaging';
+import { AngularFireFunctionsModule, USE_EMULATOR as USE_FUNCTIONS_EMULATOR, ORIGIN as FUNCTIONS_ORIGIN } from '@angular/fire/functions';
 import { AngularFireRemoteConfigModule, SETTINGS as REMOTE_CONFIG_SETTINGS, DEFAULTS as REMOTE_CONFIG_DEFAULTS } from '@angular/fire/remote-config';
 import { AngularFirePerformanceModule, PerformanceMonitoringService } from '@angular/fire/performance';
 import { AngularFireAuthGuardModule } from '@angular/fire/auth-guard';
-import { DatabaseComponent } from './database/database.component';
-import { StorageComponent } from './storage/storage.component';
+// import { DatabaseComponent } from './database/database.component';
+// import { StorageComponent } from './storage/storage.component';
 import { RemoteConfigComponent } from './remote-config/remote-config.component';
 import { HomeComponent } from './home/home.component';
 import { AuthComponent } from './auth/auth.component';
-import { MessagingComponent } from './messaging/messaging.component';
+// import { MessagingComponent } from './messaging/messaging.component';
 import { FunctionsComponent } from './functions/functions.component';
-import { FirestoreOfflineComponent } from './firestore-offline/firestore-offline.component';
-import { FirestoreOfflineModule } from './firestore-offline/firestore-offline.module';
 import { UpboatsComponent } from './upboats/upboats.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    StorageComponent,
+    // StorageComponent,
     FirestoreComponent,
-    FirestoreOfflineComponent,
-    DatabaseComponent,
+    // DatabaseComponent,
     RemoteConfigComponent,
     HomeComponent,
     AuthComponent,
-    MessagingComponent,
+    // MessagingComponent,
     FunctionsComponent,
     UpboatsComponent,
   ],
@@ -59,40 +56,38 @@ import { UpboatsComponent } from './upboats/upboats.component';
     AppRoutingModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     AngularFireModule.initializeApp(environment.firebase),
-    AngularFireStorageModule,
-    AngularFireDatabaseModule,
-    AngularFirestoreModule,
+    // AngularFireStorageModule,
+    // AngularFireDatabaseModule,
+    AngularFirestoreModule.enablePersistence(),
     AngularFireAuthModule,
     AngularFireAuthGuardModule,
     AngularFireRemoteConfigModule,
-    AngularFireMessagingModule,
-    AngularFireAnalyticsModule,
+    // AngularFireMessagingModule,
+    // AngularFireAnalyticsModule,
     AngularFireFunctionsModule,
     AngularFirePerformanceModule,
-    FirestoreOfflineModule
   ],
   providers: [
-    UserTrackingService,
-    ScreenTrackingService,
+    // UserTrackingService,
+    // ScreenTrackingService,
     PerformanceMonitoringService,
-    { provide: FIRESTORE_SETTINGS, useValue: { ignoreUndefinedProperties: true } },
-    { provide: ANALYTICS_DEBUG_MODE, useValue: true },
-    { provide: COLLECTION_ENABLED, useValue: true },
+    // { provide: FIRESTORE_SETTINGS, useValue: { ignoreUndefinedProperties: true } },
+    // { provide: ANALYTICS_DEBUG_MODE, useValue: true },
+    // { provide: COLLECTION_ENABLED, useValue: true },
     { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9099] : undefined },
-    { provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9000] : undefined },
-    { provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 8080] : undefined },
+    // { provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9000] : undefined },
+    // { provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 8080] : undefined },
     { provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ? ['localhost', 5001] : undefined },
-    { provide: NEW_ORIGIN_BEHAVIOR, useValue: true },
     { provide: FUNCTIONS_ORIGIN, useFactory: () => isDevMode() || typeof location === 'undefined' ? undefined : location.origin },
     { provide: REMOTE_CONFIG_SETTINGS, useFactory: () => isDevMode() ? { minimumFetchIntervalMillis: 10_000 } : {} },
     { provide: REMOTE_CONFIG_DEFAULTS, useValue: { background_color: 'red' } },
     { provide: USE_DEVICE_LANGUAGE, useValue: true },
-    { provide: VAPID_KEY, useValue: environment.vapidKey },
-    { provide: SERVICE_WORKER, useFactory: () =>
-      (typeof navigator !== 'undefined' && navigator.serviceWorker?.getRegistration()) ?? undefined
-    },
-    { provide: APP_VERSION, useValue: '0.0.0' },
-    { provide: APP_NAME, useValue: 'Angular' }
+    // { provide: VAPID_KEY, useValue: environment.vapidKey },
+    // { provide: SERVICE_WORKER, useFactory: () =>
+    //   (typeof navigator !== 'undefined' && navigator.serviceWorker?.getRegistration()) ?? undefined
+    // },
+    // { provide: APP_VERSION, useValue: '0.0.0' },
+    // { provide: APP_NAME, useValue: 'Angular' }
   ],
   bootstrap: [AppComponent]
 })

sample/src/app/auth/auth.component.ts

@@ -1,19 +1,18 @@
-import { Component, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core';
+import { Component, OnInit, OnDestroy, Inject, PLATFORM_ID } from '@angular/core';
 import { AngularFireAuth } from '@angular/fire/auth';
-import firebase from 'firebase/app';
-import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { trace } from '@angular/fire/performance';
-import { Inject } from '@angular/core';
-import { isPlatformServer } from '@angular/common';
+import { FirebaseApp } from '@angular/fire';
+import { Subscription } from 'rxjs';
+import { isPlatformBrowser } from '@angular/common';
 
 @Component({
   selector: 'app-auth',
   template: `
     <p>
       Auth!
       {{ (auth.user | async)?.uid | json }}
-      {{ (auth.credential | async)?.additionalUserInfo.isNewUser | json }}
+      {{ (auth.credential | async) | json }}
       <button (click)="login()" *ngIf="showLoginButton">Log in with Google</button>
       <button (click)="loginAnonymously()" *ngIf="showLoginButton">Log in anonymously</button>
       <button (click)="logout()" *ngIf="showLogoutButton">Log out</button>
@@ -28,10 +27,11 @@ export class AuthComponent implements OnInit, OnDestroy {
   showLoginButton = false;
   showLogoutButton = false;
 
-  constructor(public readonly auth: AngularFireAuth, @Inject(PLATFORM_ID) platformId: object) {
+  // tslint:disable-next-line:ban-types
+  constructor(public readonly app: FirebaseApp, public readonly auth: AngularFireAuth, @Inject(PLATFORM_ID) platformId: Object) {
 
-    if (!isPlatformServer(platformId)) {
-      this.userDisposable = this.auth.authState.pipe(
+    if (isPlatformBrowser(platformId)) {
+      this.userDisposable = auth.authState.pipe(
         trace('auth'),
         map(u => !!u)
       ).subscribe(isLoggedIn => {
@@ -50,18 +50,19 @@ export class AuthComponent implements OnInit, OnDestroy {
   }
 
   async login() {
-    const user = await this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
-    // TODO sign into offline app
+    const { getAuth, GoogleAuthProvider, signInWithPopup } = await import('./signInWithGoogle');
+    const provider = new GoogleAuthProvider();
+    return await signInWithPopup(getAuth(this.app), provider);
   }
 
   async loginAnonymously() {
-    const user = await this.auth.signInAnonymously();
-    // TODO sign into offline app
+    const { getAuth, signInAnonymously } = await import('./signInAnonymously');
+    return await signInAnonymously(getAuth(this.app));
   }
 
-  logout() {
-    this.auth.signOut();
-    // TODO sign out of offline app
+  async logout() {
+    const { getAuth, signOut } = await import('./signOut');
+    return await signOut(getAuth(this.app));
   }
 
 }

sample/src/app/auth/signInAnonymously.ts

@@ -0,0 +1 @@
+export { getAuth, signInAnonymously } from 'firebase/auth';

sample/src/app/auth/signInWithGoogle.ts

@@ -0,0 +1 @@
+export { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';

sample/src/app/auth/signOut.ts

@@ -0,0 +1 @@
+export { getAuth, signOut } from 'firebase/auth';

sample/src/app/firestore/firestore.component.ts

@@ -21,7 +21,7 @@ export class FirestoreComponent implements OnInit {
 
   constructor(state: TransferState, firestore: AngularFirestore) {
     const doc = firestore.doc('test/1');
-    const key = makeStateKey(doc.ref.path);
+    const key = makeStateKey('test/1');
     const existing = state.get(key, undefined);
     this.testDocValue$ = firestore.doc('test/1').valueChanges().pipe(
       trace('firestore'),