chore(release): 7.0.2

CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="7.0.2"></a>
+# [7.0.2](https://github.com/angular/angularfire2/compare/7.0.1...7.0.2) (2021-08-30)
+
+### Bug fixes
+
+* **types:** `firebase/*` types were not being reexported from the `@angular/fire/*` modules (modular)
+
 <a name="7.0.1"></a>
 # [7.0.1](https://github.com/angular/angularfire2/compare/7.0.0...7.0.1) (2021-08-30)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/fire",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "The official Angular library for Firebase.",
   "private": true,
   "scripts": {
@@ -93,6 +93,7 @@
     "codelyzer": "^6.0.0",
     "concurrently": "^2.2.0",
     "conventional-changelog-cli": "^1.2.0",
+    "file-loader": "^6.2.0",
     "firebase-functions-test": "^0.2.2",
     "globalthis": "^1.0.1",
     "gzip-size": "^5.1.1",

sample-compat/server.ts

@@ -14,8 +14,7 @@ global['XMLHttpRequest'] = require('xhr2');
 global['WebSocket'] = require('ws');
 /* tslint:enable:no-string-literal */
 
-// include the protos required to bundle firestore
-// import 'dir-loader!./firestore-protos';
+import '@angular/fire/firestore-protos';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app() {

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

@@ -88,7 +88,7 @@ import { UpboatsComponent } from './upboats/upboats.component';
     { 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?.register('firebase-messaging-sw.js') || undefined },
+    { provide: SERVICE_WORKER, useFactory: () => typeof navigator !== 'undefined' && navigator.serviceWorker?.register('firebase-messaging-sw.js', { scope: '__' }) || undefined },
     { provide: APP_VERSION, useValue: '0.0.0' },
     { provide: APP_NAME, useValue: 'Angular' },
   ],

sample-compat/src/firebase-messaging-sw.js

@@ -1,5 +1,5 @@
-importScripts('https://www.gstatic.com/firebasejs/9.0.0-20217250818/firebase-app-compat.js');
-importScripts('https://www.gstatic.com/firebasejs/9.0.0-20217250818/firebase-messaging-compat.js');
+importScripts('https://www.gstatic.com/firebasejs/9.0.1/firebase-app-compat.js');
+importScripts('https://www.gstatic.com/firebasejs/9.0.1/firebase-messaging-compat.js');
 
 firebase.initializeApp({
     apiKey: 'AIzaSyA7CNE9aHbcSEbt9y03QReJ-Xr0nwKg7Yg',

sample-compat/tsconfig.server.json

@@ -10,8 +10,7 @@
   },
   "files": [
     "src/main.server.ts",
-    "server.ts",
-    "firestore-protos.ts"
+    "server.ts"
   ],
   "angularCompilerOptions": {
     "entryModule": "./src/app/app.server.module#AppServerModule"

sample/package.json

@@ -49,6 +49,7 @@
     "@types/express": "^4.17.0",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
+    "file-loader": "^6.2.0",
     "firebase-tools": "^9.0.0",
     "fuzzy": "^0.1.3",
     "inquirer": "^6.2.2",
@@ -71,4 +72,4 @@
   "resolutions": {
     "webpack": "^5.35.0"
   }
-}
+}

sample/server.ts

@@ -8,16 +8,14 @@ import { AppServerModule } from './src/main.server';
 import { APP_BASE_HREF } from '@angular/common';
 import { existsSync } from 'fs';
 
-// Polyfills
-require('cross-fetch/polyfill');
-
-
 // Polyfill XMLHttpRequest and WS for Firebase
 /* tslint:disable:no-string-literal */
 global['XMLHttpRequest'] = require('xhr2');
 global['WebSocket'] = require('ws');
 /* tslint:enable:no-string-literal */
 
+import '@angular/fire/firestore-protos';
+
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
   const server = express();

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

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', component: HomeComponent, outlet: 'primary', pathMatch: 'prefix' },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, {

sample/src/app/app.browser.module.ts

@@ -8,10 +8,12 @@ import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
+import { BrowserTransferStateModule } from '@angular/platform-browser';
 
 @NgModule({
   imports: [
     AppModule,
+    BrowserTransferStateModule,
     provideRemoteConfig(() => getRemoteConfig()),
     provideAnalytics(() => getAnalytics()),
     provideMessaging(() => getMessaging()),

sample/src/app/app.component.ts

@@ -1,41 +1,18 @@
-import { ApplicationRef, Component, Optional } from '@angular/core';
-import { Auth, authState } from '@angular/fire/auth';
-import { Firestore, getDoc, doc, DocumentSnapshot } from '@angular/fire/firestore';
-import { DocumentData } from 'rxfire/firestore/lite/interfaces';
+import { ApplicationRef, Component } from '@angular/core';
 import { distinctUntilChanged } from 'rxjs/operators';
-import { Messaging, onMessage } from '@angular/fire/messaging';
-import { getToken } from '@angular/fire/messaging';
-
-import { environment } from '../environments/environment';
 
 @Component({
   selector: 'app-root',
   template: `
-    <pre>{{ (myDocData | async)?.data() | json }}</pre>
     <router-outlet></router-outlet>
   `,
   styles: []
 })
 export class AppComponent {
-  myDocData: Promise<DocumentSnapshot<DocumentData>>;
   title = 'sample';
   constructor(
     appRef: ApplicationRef,
-    auth: Auth,
-    firestore: Firestore,
-    @Optional() messaging: Messaging,
   ) {
-    authState(auth).subscribe(it => console.log('authState', it));
     appRef.isStable.pipe(distinctUntilChanged()).subscribe(it => console.log('isStable', it));
-    this.myDocData = getDoc(doc(firestore, 'animals/NJdGQCv1P92SWsp4nSE7'));
-    if (messaging) {
-      navigator.serviceWorker.register('firebase-messaging-sw.js', { type: 'module' }).then(serviceWorkerRegistration => {
-        getToken(messaging, {
-          serviceWorkerRegistration,
-          vapidKey: environment.vapidKey,
-        }).then(it => console.log(it));
-      });
-      onMessage(messaging, it => console.log('onMessage', it));
-    }
   }
 }

sample/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { provideFirebaseApp, initializeApp, getApp } from '@angular/fire/app';
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
 import { getStorage, provideStorage, connectStorageEmulator } from '@angular/fire/storage';
 import { getDatabase, provideDatabase, connectDatabaseEmulator } from '@angular/fire/database';
@@ -11,11 +11,28 @@ import { FunctionsModule } from '@angular/fire/functions';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { environment } from '../environments/environment';
-
+import { HomeComponent } from './home/home.component';
+import { UpboatsComponent } from './upboats/upboats.component';
+import { AuthComponent } from './auth/auth.component';
+import { FirestoreComponent } from './firestore/firestore.component';
+import { DatabaseComponent } from './database/database.component';
+import { FunctionsComponent } from './functions/functions.component';
+import { MessagingComponent } from './messaging/messaging.component';
+import { RemoteConfigComponent } from './remote-config/remote-config.component';
+import { StorageComponent } from './storage/storage.component';
 
 @NgModule({
   declarations: [
     AppComponent,
+    HomeComponent,
+    UpboatsComponent,
+    AuthComponent,
+    FirestoreComponent,
+    DatabaseComponent,
+    FunctionsComponent,
+    MessagingComponent,
+    RemoteConfigComponent,
+    StorageComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
@@ -45,16 +62,7 @@ import { environment } from '../environments/environment';
       return database;
     }),
     provideStorage(() => {
-      // While I've provided two instances this should be the default, since it
-      // uses the default app
-      const storage = getStorage(getApp(), 'another-bucket');
-      if (environment.useEmulators) {
-        connectStorageEmulator(storage, 'localhost', 9199);
-      }
-      return storage;
-    }),
-    provideStorage(() => {
-      const storage = getStorage(getApp('second'));
+      const storage = getStorage();
       if (environment.useEmulators) {
         connectStorageEmulator(storage, 'localhost', 9199);
       }

sample/src/app/app.server.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { ServerModule } from '@angular/platform-server';
+import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
 
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
@@ -8,6 +8,7 @@ import { AppComponent } from './app.component';
   imports: [
     AppModule,
     ServerModule,
+    ServerTransferStateModule,
   ],
   bootstrap: [AppComponent],
 })

sample/src/app/auth/GoogleAuthProvider.ts

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

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

@@ -0,0 +1,25 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthComponent } from './auth.component';
+
+describe('AuthComponent', () => {
+  let component: AuthComponent;
+  let fixture: ComponentFixture<AuthComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AuthComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,61 @@
+import { Component, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core';
+import { Auth, authState, signInAnonymously, signOut, User } from '@angular/fire/auth';
+import { Observable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { traceUntilFirst } from '@angular/fire/performance';
+import { Inject } from '@angular/core';
+
+@Component({
+  selector: 'app-auth',
+  template: `
+    <p>
+      Auth!
+      {{ (user | async)?.uid | 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>
+    </p>
+  `,
+  styles: []
+})
+export class AuthComponent implements OnInit, OnDestroy {
+
+  private readonly userDisposable: Subscription|undefined;
+  public readonly user: Observable<User | null>;
+
+  showLoginButton = false;
+  showLogoutButton = false;
+
+  constructor(public readonly auth: Auth, @Inject(PLATFORM_ID) platformId: object) {
+    this.user = authState(this.auth);
+    this.userDisposable = authState(this.auth).pipe(
+      traceUntilFirst('auth'),
+      map(u => !!u)
+    ).subscribe(isLoggedIn => {
+      this.showLoginButton = !isLoggedIn;
+      this.showLogoutButton = isLoggedIn;
+    });
+  }
+
+  ngOnInit(): void { }
+
+  ngOnDestroy(): void {
+    if (this.userDisposable) {
+      this.userDisposable.unsubscribe();
+    }
+  }
+
+  async login() {
+    const { GoogleAuthProvider, signInWithPopup } = await import('./GoogleAuthProvider');
+    return await signInWithPopup(this.auth, new GoogleAuthProvider());
+  }
+
+  async loginAnonymously() {
+    return await signInAnonymously(this.auth);
+  }
+
+  async logout() {
+    return await signOut(this.auth);
+  }
+
+}

sample/src/app/database/database.component.spec.ts

@@ -0,0 +1,25 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatabaseComponent } from './database.component';
+
+describe('DatabaseComponent', () => {
+  let component: DatabaseComponent;
+  let fixture: ComponentFixture<DatabaseComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DatabaseComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatabaseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});