diff --git a/sample/angular.json b/sample/angular.json index 81178df28..bd7dc84a9 100644 --- a/sample/angular.json +++ b/sample/angular.json @@ -129,37 +129,7 @@ "main": "server.ts", "tsConfig": "tsconfig.server.json", "bundleDependencies": true, - "externalDependencies": [ - "firebase", - "@firebase/analytics", - "@firebase/analytics-types", - "@firebase/app", - "@firebase/app-types", - "@firebase/auth", - "@firebase/auth-interop-types", - "@firebase/auth-types", - "@firebase/component", - "@firebase/database", - "@firebase/database-types", - "@firebase/firestore", - "@firebase/firestore-types", - "@firebase/functions", - "@firebase/functions-types", - "@firebase/installations", - "@firebase/installations-types", - "@firebase/logger", - "@firebase/messaging", - "@firebase/messaging-types", - "@firebase/performance", - "@firebase/performance-types", - "@firebase/polyfill", - "@firebase/remote-config", - "@firebase/remote-config-types", - "@firebase/storage", - "@firebase/storage-types", - "@firebase/util", - "@firebase/webchannel-wrapper" - ] + "externalDependencies": [ ] }, "configurations": { "production": { diff --git a/sample/firebase.json b/sample/firebase.json index 0ab55f5ae..65ed0707c 100644 --- a/sample/firebase.json +++ b/sample/firebase.json @@ -15,6 +15,14 @@ "value": "public,max-age=31536000,immutable" } ] + }, { + "source": "*-sw.js", + "headers": [ + { + "key": "Cache-Control", + "value": "no-cache" + } + ] } ], "rewrites": [ @@ -26,7 +34,7 @@ } ], "functions": { - "source": "functions" + "source": "dist/sample" }, "emulators": { "functions": { diff --git a/sample/firestore-protos.ts b/sample/firestore-protos.ts new file mode 100644 index 000000000..3ce361529 --- /dev/null +++ b/sample/firestore-protos.ts @@ -0,0 +1,8 @@ +module.exports = { + path: './node_modules/@firebase/firestore/dist/src/protos', + filter: /\.proto$/, + pathTransform: (path: string) => { + const name = path.split('./node_modules/@firebase/firestore/dist/')[1]; + return `file-loader?name=${name}!${path}`; + } +}; diff --git a/sample/package.json b/sample/package.json index dd5383d56..bc0b2860f 100644 --- a/sample/package.json +++ b/sample/package.json @@ -50,6 +50,7 @@ "@types/jasminewd2": "~2.0.3", "codelyzer": "^6.0.0", "concurrently": "^5.3.0", + "dir-loader": "^0.3.0", "express": "^4.17.1", "express-serve-static-core": "^0.1.1", "firebase-admin": "^8.13.0", diff --git a/sample/server.ts b/sample/server.ts index c59772b10..a82723a8c 100644 --- a/sample/server.ts +++ b/sample/server.ts @@ -4,7 +4,7 @@ import { ngExpressEngine } from '@nguniversal/express-engine'; import * as express from 'express'; import { join } from 'path'; -import { AppServerModule } from './src/main.server'; +import { AppServerModule, } from './src/main.server'; import { APP_BASE_HREF } from '@angular/common'; import { existsSync } from 'fs'; @@ -14,6 +14,9 @@ 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'; + // The Express app is exported so that it can be used by serverless Functions. export function app() { const server = express(); @@ -22,7 +25,7 @@ export function app() { // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine) server.engine('html', ngExpressEngine({ - bootstrap: AppServerModule, + bootstrap: AppServerModule })); server.set('view engine', 'html'); diff --git a/sample/src/app/app-routing.module.ts b/sample/src/app/app-routing.module.ts index e3eeded12..750e62d3c 100644 --- a/sample/src/app/app-routing.module.ts +++ b/sample/src/app/app-routing.module.ts @@ -2,14 +2,15 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { ProtectedComponent } from './protected/protected.component'; -import { AngularFireAuthGuard } from '@angular/fire/auth-guard'; +import { AngularFireAuthGuard, canActivate, isNotAnonymous } from '@angular/fire/auth-guard'; import { SecondaryComponent } from './secondary/secondary.component'; const routes: Routes = [ - { path: '', component: HomeComponent, outlet: 'primary' }, - { path: '', component: SecondaryComponent, outlet: 'secondary' }, - { path: '', component: SecondaryComponent, outlet: 'tertiary' }, + { path: '', component: HomeComponent, outlet: 'primary', pathMatch: 'prefix' }, + { 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] }, @@ -17,7 +18,7 @@ const routes: Routes = [ { path: 'protected', component: ProtectedComponent, canActivate: [AngularFireAuthGuard], outlet: 'tertiary' }, { path: 'protected-lazy', loadChildren: () => import('./protected-lazy/protected-lazy.module').then(m => m.ProtectedLazyModule), - canActivate: [AngularFireAuthGuard], + ...canActivate(() => isNotAnonymous), outlet: 'secondary' }, ]; diff --git a/sample/src/app/app.component.ts b/sample/src/app/app.component.ts index dbe6cbc6c..9b6ffc97c 100644 --- a/sample/src/app/app.component.ts +++ b/sample/src/app/app.component.ts @@ -4,11 +4,21 @@ import { FirebaseApp } from '@angular/fire'; @Component({ selector: 'app-root', template: ` - Home | Protected | Protected Lazy | Protected Lazy Deep | Protected Lazy Deep +

AngularFire kitchen sink

+

Primary outlet

+ - Home | Protected | Protected Lazy +

Secondary outlet

+ - Home | Protected +

Yet anther outlet

+ `, styles: [``] diff --git a/sample/src/app/app.module.ts b/sample/src/app/app.module.ts index eb921fede..cd31d6864 100644 --- a/sample/src/app/app.module.ts +++ b/sample/src/app/app.module.ts @@ -83,7 +83,7 @@ import { UpboatsComponent } from './upboats/upboats.component'; { 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() ? undefined : location.origin }, + { 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 }, diff --git a/sample/src/app/app.server.module.ts b/sample/src/app/app.server.module.ts index 18e097f17..dd55bd1b6 100644 --- a/sample/src/app/app.server.module.ts +++ b/sample/src/app/app.server.module.ts @@ -1,8 +1,9 @@ -import { NgModule } from '@angular/core'; +import { isDevMode, NgModule } from '@angular/core'; import { ServerModule, ServerTransferStateModule } from '@angular/platform-server'; import { AppModule } from './app.module'; import { AppComponent } from './app.component'; +import { APP_BASE_HREF } from '@angular/common'; @NgModule({ imports: [ @@ -10,6 +11,9 @@ import { AppComponent } from './app.component'; ServerModule, ServerTransferStateModule ], + providers: [ + { provide: APP_BASE_HREF, useFactory: () => isDevMode() ? '/us-central1/ssr' : '/ssr' }, + ], bootstrap: [AppComponent], }) export class AppServerModule {} diff --git a/sample/src/app/protected-lazy/protected-lazy.component.html b/sample/src/app/protected-lazy/protected-lazy.component.html index 7c96e988f..2d8988b8d 100644 --- a/sample/src/app/protected-lazy/protected-lazy.component.html +++ b/sample/src/app/protected-lazy/protected-lazy.component.html @@ -1,4 +1,4 @@ -

protected-lazy works!

+

lazy works!