Skip to content

Commit

Permalink
fix(various): NG 10 fixes, Storage & FCM regressions (#2522)
Browse files Browse the repository at this point in the history
* Use navigator serviceWorker for notifications, as FCM seems to be having trouble with RXJS & Angular
* Use more of the `registerX` hacks to work around ngcc tree-shaking. Tapping also seems to help, race condition maybe?
* Port the sample app to NG 10
* Add all the firebase packages to the Universal externals, having a bunch of problems with that
* Experimenting with overriding the legacy packaging choices of the JS SDK with `ngcc.config` in the sample app, should add to the `ng add` schematic if it proves workable
* FCM broke in a minor at some point, getToken now prompts for permission; work around this break for now
* Firebase Auth seems to be firing an initial null more often now, add the getRedirectResult work-around for now
* Firebase Auth is now failing to load in the server environment entirely, work around by returning `of(null)`
* Storage is not firing the last snapshot state before completion, making this API difficult to work with, fixed
  • Loading branch information
jamesdaniels authored Jun 26, 2020
1 parent 1bf6cc9 commit 7cb6c03
Show file tree
Hide file tree
Showing 45 changed files with 2,403 additions and 1,349 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@angular/fire",
"version": "6.0.2",
"version": "6.0.3",
"description": "The official library of Firebase and Angular.",
"private": true,
"scripts": {
Expand Down
File renamed without changes.
29 changes: 24 additions & 5 deletions sample/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
"src/assets",
"src/manifest.webmanifest",
"src/firebase-messaging-sw.js"
],
"styles": [
"src/styles.css"
Expand Down Expand Up @@ -55,7 +57,9 @@
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
}
}
},
Expand Down Expand Up @@ -85,7 +89,8 @@
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
"src/assets",
"src/manifest.webmanifest"
],
"styles": [
"src/styles.css"
Expand Down Expand Up @@ -124,9 +129,23 @@
"outputPath": "dist/sample/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json",
"bundleDependencies": false,
"bundleDependencies": true,
"externalDependencies": [
"@firebase/firestore"
"firebase",
"@firebase/app",
"@firebase/analytics",
"@firebase/app",
"@firebase/auth",
"@firebase/component",
"@firebase/database",
"@firebase/firestore",
"@firebase/functions",
"@firebase/installations",
"@firebase/messaging",
"@firebase/storage",
"@firebase/performance",
"@firebase/remote-config",
"@firebase/util"
]
},
"configurations": {
Expand Down
72 changes: 72 additions & 0 deletions sample/ngcc.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
module.exports = {
packages: {
"firebase": {
entryPoints: {
".": { override: { main: undefined, browser: undefined } },
"./analytics": { override: { main: undefined, browser: undefined } },
"./app": {override: { main: undefined, browser: undefined } },
"./auth": {override: { main: undefined, browser: undefined } },
"./database": { override: { main: undefined, browser: undefined } },
"./firestore": { override: { main: undefined, browser: undefined } },
"./functions": { override: { main: undefined, browser: undefined } },
"./installations": { override: { main: undefined, browser: undefined } },
"./storage": { override: { main: undefined, browser: undefined } },
"./performance": { override: { main: undefined, browser: undefined } },
"./remote-config": { override: { main: undefined, browser: undefined } },
},
generateDeepReexports: true
},
"@firebase/analytics": {
entryPoints: { ".": { override : { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
},
"@firebase/app": {
entryPoints: { ".": { override : { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
},
"@firebase/auth": {
entryPoints: { ".": { override : { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
},
"@firebase/component": {
entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
},
"@firebase/database": {
entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
},
"@firebase/firestore": {
entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
},
"@firebase/functions": {
entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
},
"@firebase/installations": {
entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
},
"@firebase/messaging": {
entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
},
"@firebase/storage": {
entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
},
"@firebase/performance": {
entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
},
"@firebase/remote-config": {
entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
},
"@firebase/util": {
entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
}
}
}
29 changes: 29 additions & 0 deletions sample/ngsw-config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
46 changes: 23 additions & 23 deletions sample/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,30 @@
},
"private": true,
"dependencies": {
"@angular/animations": "~9.1.0",
"@angular/common": "~9.1.0",
"@angular/compiler": "~9.1.0",
"@angular/core": "~9.1.0",
"@angular/animations": "~10.0.0",
"@angular/common": "~10.0.0",
"@angular/compiler": "~10.0.0",
"@angular/core": "~10.0.0",
"@angular/fire": "../dist/packages-dist",
"@angular/forms": "~9.1.0",
"@angular/platform-browser": "~9.1.0",
"@angular/platform-browser-dynamic": "~9.1.0",
"@angular/platform-server": "~9.1.0",
"@angular/router": "~9.1.0",
"@angular/service-worker": "~9.1.0",
"@angular/forms": "~10.0.0",
"@angular/platform-browser": "~10.0.0",
"@angular/platform-browser-dynamic": "~10.0.0",
"@angular/platform-server": "~10.0.0",
"@angular/router": "~10.0.0",
"@angular/service-worker": "^10.0.0",
"@nguniversal/express-engine": "~9.1.0",
"firebase": "^7.13.2",
"proxy-polyfill": "^0.3.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/architect": "~0.901.0",
"@angular-devkit/build-angular": "~0.901.0",
"@angular/cli": "~9.1.0",
"@angular/compiler-cli": "~9.1.0",
"@angular/language-service": "~9.1.0",
"@angular-devkit/build-angular": "~0.1000.0",
"@angular/cli": "~10.0.0",
"@angular/compiler-cli": "~10.0.0",
"@angular/language-service": "~10.0.0",
"@nguniversal/builders": "^9.1.0",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
Expand All @@ -53,15 +53,15 @@
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
"tslint": "~6.1.0",
"typescript": "~3.9.5"
}
}
4 changes: 3 additions & 1 deletion sample/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ 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';

const shouldUseEmulator = () => false;

Expand All @@ -42,7 +43,8 @@ const shouldUseEmulator = () => false;
DatabaseComponent,
RemoteConfigComponent,
HomeComponent,
AuthComponent
AuthComponent,
MessagingComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'serverApp' }),
Expand Down
34 changes: 20 additions & 14 deletions sample/src/app/auth/auth.component.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Component, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth as rawAuth } from 'firebase/app';
import firebase from 'firebase/app';
import { Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
import { map, tap } from 'rxjs/operators';
import { trace } from '@angular/fire/performance';
import { Inject } from '@angular/core';
import { isPlatformServer } from '@angular/common';

@Component({
selector: 'app-auth',
Expand All @@ -19,29 +21,33 @@ import { trace } from '@angular/fire/performance';
})
export class AuthComponent implements OnInit, OnDestroy {

private readonly userDisposable: Subscription;
private readonly userDisposable: Subscription|undefined;

showLoginButton = false;
showLogoutButton = false;

constructor(public readonly auth: AngularFireAuth) {
this.userDisposable = this.auth.authState.pipe(
trace('auth'),
map(u => !!u)
).subscribe(isLoggedIn => {
this.showLoginButton = !isLoggedIn;
this.showLogoutButton = isLoggedIn;
});
constructor(public readonly auth: AngularFireAuth, @Inject(PLATFORM_ID) platformId: object) {
if (!isPlatformServer(platformId)) {
this.userDisposable = this.auth.authState.pipe(
trace('auth'),
map(u => !!u)
).subscribe(isLoggedIn => {
this.showLoginButton = !isLoggedIn;
this.showLogoutButton = isLoggedIn;
});
}
}

ngOnInit(): void { }

ngOnDestroy(): void {
this.userDisposable.unsubscribe();
if (this.userDisposable) {
this.userDisposable.unsubscribe();
}
}

login() {
this.auth.signInWithPopup(new rawAuth.GoogleAuthProvider());
this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
}

logout() {
Expand Down
1 change: 1 addition & 0 deletions sample/src/app/home/home.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { FirebaseApp } from '@angular/fire';
<app-remote-config></app-remote-config>
<app-storage></app-storage>
<app-auth></app-auth>
<app-messaging></app-messaging>
`,
styles: [``]
})
Expand Down
25 changes: 25 additions & 0 deletions sample/src/app/messaging/messaging.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { MessagingComponent } from './messaging.component';

describe('MessagingComponent', () => {
let component: MessagingComponent;
let fixture: ComponentFixture<MessagingComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MessagingComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(MessagingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
45 changes: 45 additions & 0 deletions sample/src/app/messaging/messaging.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { Component, OnInit } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { trace } from '@angular/fire/performance';
import { Observable, fromEvent } from 'rxjs';
import { tap, map, filter } from 'rxjs/operators';
import * as firebase from 'firebase/app';
import 'firebase/messaging';
import { SwPush } from '@angular/service-worker';

@Component({
selector: 'app-messaging',
template: `
<p>
Messaging!
{{ token$ | async | json }}
{{ message$ | async | json }}
<button (click)="request()" *ngIf="showRequest">Request FCM token</button>
</p>
`,
styles: []
})
export class MessagingComponent implements OnInit {

token$: Observable<any>;
message$: Observable<any>;
showRequest = false;

constructor(public readonly messaging: AngularFireMessaging, swPush: SwPush) {
messaging.usePublicVapidKey('BIDPctnXHQDIjcOXxDS6qQcz-QTws7bL8v7UPgFnS1Ky5BZL3jS3-XXfxwRHmAUMOk7pXme7ttOBvVoIfX57PEo').then(() => {
this.message$ = messaging.messages;
this.token$ = messaging.tokenChanges.pipe(
trace('token'),
tap(token => this.showRequest = !token)
);
});
}

ngOnInit(): void {
}

request() {
this.messaging.requestPermission.subscribe(console.log, console.error);
}

}
Loading

0 comments on commit 7cb6c03

Please sign in to comment.