@angular/fire 7.6.1 → 16.0.0-canary.1350920

package/compat/performance/performance.d.ts

@@ -1,8 +1,8 @@
 import { InjectionToken, NgZone } from '@angular/core';
-import { Observable } from 'rxjs';
-import firebase from 'firebase/compat/app';
 import { ɵPromiseProxy } from '@angular/fire/compat';
 import { FirebaseApp } from '@angular/fire/compat';
+import firebase from 'firebase/compat/app';
+import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare const INSTRUMENTATION_ENABLED: InjectionToken<boolean>;
 export declare const DATA_COLLECTION_ENABLED: InjectionToken<boolean>;

package/compat/proxy.d.ts

@@ -1,21 +1,21 @@
 import { NgZone } from '@angular/core';
 import { Observable } from 'rxjs';
-declare type MyFunction = (...args: any[]) => any;
-declare type FunctionPropertyNames<T> = {
+type MyFunction = (...args: any[]) => any;
+type FunctionPropertyNames<T> = {
     [K in keyof T]: T[K] extends MyFunction ? K : never;
 }[keyof T];
-declare type ReturnTypeOrNever<T> = T extends MyFunction ? ReturnType<T> : never;
-declare type ParametersOrNever<T> = T extends MyFunction ? Parameters<T> : never;
-declare type PromiseReturningFunctionPropertyNames<T> = {
+type ReturnTypeOrNever<T> = T extends MyFunction ? ReturnType<T> : never;
+type ParametersOrNever<T> = T extends MyFunction ? Parameters<T> : never;
+type PromiseReturningFunctionPropertyNames<T> = {
     [K in FunctionPropertyNames<T>]: ReturnTypeOrNever<T[K]> extends Promise<any> ? K : never;
 }[FunctionPropertyNames<T>];
-declare type NonPromiseReturningFunctionPropertyNames<T> = {
+type NonPromiseReturningFunctionPropertyNames<T> = {
     [K in FunctionPropertyNames<T>]: ReturnTypeOrNever<T[K]> extends Promise<any> ? never : K;
 }[FunctionPropertyNames<T>];
-declare type NonFunctionPropertyNames<T> = {
+type NonFunctionPropertyNames<T> = {
     [K in keyof T]: T[K] extends MyFunction ? never : K;
 }[keyof T];
-export declare type ɵPromiseProxy<T> = {
+export type ɵPromiseProxy<T> = {
     [K in NonFunctionPropertyNames<T>]: Promise<T[K]>;
 } & {
     [K in NonPromiseReturningFunctionPropertyNames<T>]: (...args: ParametersOrNever<T[K]>) => Promise<ReturnTypeOrNever<T[K]>>;

package/compat/remote-config/interfaces.d.ts

@@ -1,2 +1,2 @@
 import firebase from 'firebase/compat/app';
-export declare type Settings = firebase.remoteConfig.Settings;
+export type Settings = firebase.remoteConfig.Settings;

package/compat/remote-config/remote-config.d.ts

@@ -1,14 +1,12 @@
 import { InjectionToken, NgZone } from '@angular/core';
-import { MonoTypeOperatorFunction, Observable, OperatorFunction } from 'rxjs';
 import { ɵAngularFireSchedulers } from '@angular/fire';
 import { ɵPromiseProxy } from '@angular/fire/compat';
 import { FirebaseOptions } from 'firebase/app';
 import firebase from 'firebase/compat/app';
+import { MonoTypeOperatorFunction, Observable, OperatorFunction } from 'rxjs';
 import { Settings } from './interfaces';
 import * as i0 from "@angular/core";
-export interface ConfigTemplate {
-    [key: string]: string | number | boolean;
-}
+export type ConfigTemplate = Record<string, string | number | boolean>;
 export declare const SETTINGS: InjectionToken<firebase.remoteConfig.Settings>;
 export declare const DEFAULTS: InjectionToken<ConfigTemplate>;
 export interface AngularFireRemoteConfig extends ɵPromiseProxy<firebase.remoteConfig.RemoteConfig> {
@@ -33,53 +31,21 @@ export declare class AngularFireRemoteConfig {
     private zone;
     readonly changes: Observable<Parameter>;
     readonly parameters: Observable<Parameter[]>;
-    readonly numbers: Observable<{
-        [key: string]: number | undefined;
-    }> & {
-        [key: string]: Observable<number>;
-    };
-    readonly booleans: Observable<{
-        [key: string]: boolean | undefined;
-    }> & {
-        [key: string]: Observable<boolean>;
-    };
-    readonly strings: Observable<{
-        [key: string]: string | undefined;
-    }> & {
-        [key: string]: Observable<string | undefined>;
-    };
+    readonly numbers: Observable<Record<string, number | undefined>> & Record<string, Observable<number>>;
+    readonly booleans: Observable<Record<string, boolean | undefined>> & Record<string, Observable<boolean>>;
+    readonly strings: Observable<Record<string, string | undefined>> & Record<string, Observable<string | undefined>>;
     constructor(options: FirebaseOptions, name: string | null | undefined, settings: Settings | null, defaultConfig: ConfigTemplate | null, zone: NgZone, schedulers: ɵAngularFireSchedulers, platformId: Object);
     static ɵfac: i0.ɵɵFactoryDeclaration<AngularFireRemoteConfig, [null, { optional: true; }, { optional: true; }, { optional: true; }, null, null, null]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AngularFireRemoteConfig>;
 }
 export declare const budget: <T>(interval: number) => MonoTypeOperatorFunction<T>;
-export declare function scanToObject(): OperatorFunction<Parameter, {
-    [key: string]: string | undefined;
-}>;
-export declare function scanToObject(to: 'numbers'): OperatorFunction<Parameter, {
-    [key: string]: number | undefined;
-}>;
-export declare function scanToObject(to: 'booleans'): OperatorFunction<Parameter, {
-    [key: string]: boolean | undefined;
-}>;
-export declare function scanToObject(to: 'strings'): OperatorFunction<Parameter, {
-    [key: string]: string | undefined;
-}>;
-export declare function scanToObject<T extends ConfigTemplate>(template: T): OperatorFunction<Parameter, T & {
-    [key: string]: string | undefined;
-}>;
-export declare function mapToObject(): OperatorFunction<Parameter[], {
-    [key: string]: string | undefined;
-}>;
-export declare function mapToObject(to: 'numbers'): OperatorFunction<Parameter[], {
-    [key: string]: number | undefined;
-}>;
-export declare function mapToObject(to: 'booleans'): OperatorFunction<Parameter[], {
-    [key: string]: boolean | undefined;
-}>;
-export declare function mapToObject(to: 'strings'): OperatorFunction<Parameter[], {
-    [key: string]: string | undefined;
-}>;
-export declare function mapToObject<T extends ConfigTemplate>(template: T): OperatorFunction<Parameter[], T & {
-    [key: string]: string | undefined;
-}>;
+export declare function scanToObject(): OperatorFunction<Parameter, Record<string, string | undefined>>;
+export declare function scanToObject(to: 'numbers'): OperatorFunction<Parameter, Record<string, number | undefined>>;
+export declare function scanToObject(to: 'booleans'): OperatorFunction<Parameter, Record<string, boolean | undefined>>;
+export declare function scanToObject(to: 'strings'): OperatorFunction<Parameter, Record<string, string | undefined>>;
+export declare function scanToObject<T extends ConfigTemplate>(template: T): OperatorFunction<Parameter, T & Record<string, string | undefined>>;
+export declare function mapToObject(): OperatorFunction<Parameter[], Record<string, string | undefined>>;
+export declare function mapToObject(to: 'numbers'): OperatorFunction<Parameter[], Record<string, number | undefined>>;
+export declare function mapToObject(to: 'booleans'): OperatorFunction<Parameter[], Record<string, boolean | undefined>>;
+export declare function mapToObject(to: 'strings'): OperatorFunction<Parameter[], Record<string, string | undefined>>;
+export declare function mapToObject<T extends ConfigTemplate>(template: T): OperatorFunction<Parameter[], T & Record<string, string | undefined>>;

package/compat/storage/interfaces.d.ts

@@ -1,9 +1,9 @@
 import firebase from 'firebase/compat/app';
-export declare type UploadTask = firebase.storage.UploadTask;
-export declare type UploadTaskSnapshot = firebase.storage.UploadTaskSnapshot;
-export declare type UploadMetadata = firebase.storage.UploadMetadata;
-export declare type SettableMetadata = firebase.storage.SettableMetadata;
-export declare type Reference = firebase.storage.Reference;
-export declare type StringFormat = firebase.storage.StringFormat;
-export declare type ListResult = firebase.storage.ListResult;
-export declare type ListOptions = firebase.storage.ListOptions;
+export type UploadTask = firebase.storage.UploadTask;
+export type UploadTaskSnapshot = firebase.storage.UploadTaskSnapshot;
+export type UploadMetadata = firebase.storage.UploadMetadata;
+export type SettableMetadata = firebase.storage.SettableMetadata;
+export type Reference = firebase.storage.Reference;
+export type StringFormat = firebase.storage.StringFormat;
+export type ListResult = firebase.storage.ListResult;
+export type ListOptions = firebase.storage.ListOptions;

package/compat/storage/observable/fromTask.d.ts

@@ -1,4 +1,3 @@
 import { Observable } from 'rxjs';
 import { UploadTask } from '../interfaces';
-import firebase from 'firebase/compat/app';
-export declare function fromTask(task: UploadTask): Observable<firebase.storage.UploadTaskSnapshot>;
+export declare function fromTask(task: UploadTask): Observable<import("firebase/compat").default.storage.UploadTaskSnapshot>;

package/compat/storage/pipes/storageUrl.pipe.d.ts

@@ -13,7 +13,7 @@ export declare class GetDownloadURLPipe implements PipeTransform, OnDestroy {
     transform(path: string): any;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GetDownloadURLPipe, [null, null, { optional: true; }]>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<GetDownloadURLPipe, "getDownloadURL">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<GetDownloadURLPipe, "getDownloadURL", false>;
 }
 export declare class GetDownloadURLPipeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<GetDownloadURLPipeModule, never>;

package/compat/storage/ref.d.ts

@@ -1,6 +1,6 @@
+import { Observable } from 'rxjs';
 import { ListOptions, ListResult, Reference, SettableMetadata, UploadMetadata } from './interfaces';
 import { AngularFireUploadTask } from './task';
-import { Observable } from 'rxjs';
 export interface AngularFireStorageReference {
     getDownloadURL(): Observable<any>;
     getMetadata(): Observable<any>;

package/compat/storage/storage.d.ts

@@ -1,10 +1,10 @@
 import { InjectionToken, NgZone } from '@angular/core';
 import { ɵAngularFireSchedulers } from '@angular/fire';
+import { AppCheckInstances } from '@angular/fire/app-check';
 import { FirebaseOptions } from 'firebase/app';
+import firebase from 'firebase/compat/app';
 import { UploadMetadata } from './interfaces';
 import 'firebase/compat/storage';
-import firebase from 'firebase/compat/app';
-import { AppCheckInstances } from '@angular/fire/app-check';
 import * as i0 from "@angular/core";
 export declare const BUCKET: InjectionToken<string>;
 export declare const MAX_UPLOAD_RETRY_TIME: InjectionToken<number>;
@@ -21,7 +21,7 @@ export declare const USE_EMULATOR: InjectionToken<[host: string, port: number, o
  */
 export declare class AngularFireStorage {
     readonly storage: firebase.storage.Storage;
-    constructor(options: FirebaseOptions, name: string | null | undefined, storageBucket: string | null, platformId: Object, zone: NgZone, schedulers: ɵAngularFireSchedulers, maxUploadRetryTime: number | any, maxOperationRetryTime: number | any, _useEmulator: any, _appCheckInstances: AppCheckInstances);
+    constructor(options: FirebaseOptions, name: string | null | undefined, storageBucket: string | null, platformId: Object, zone: NgZone, schedulers: ɵAngularFireSchedulers, maxUploadRetryTime: any, maxOperationRetryTime: any, _useEmulator: any, _appCheckInstances: AppCheckInstances);
     ref(path: string): import("./ref").AngularFireStorageReference;
     refFromURL(path: string): import("./ref").AngularFireStorageReference;
     upload(path: string, data: any, metadata?: UploadMetadata): import("@angular/fire/compat/storage").AngularFireUploadTask;

package/compat/storage/task.d.ts

@@ -1,5 +1,5 @@
-import { UploadTask, UploadTaskSnapshot } from './interfaces';
 import { Observable } from 'rxjs';
+import { UploadTask, UploadTaskSnapshot } from './interfaces';
 export interface AngularFireUploadTask {
     task: UploadTask;
     snapshotChanges(): Observable<UploadTaskSnapshot | undefined>;

package/core.d.ts

@@ -1,17 +1,13 @@
 import { Version } from '@angular/core';
 import { FirebaseApp } from 'firebase/app';
+import type { AppCheck } from 'firebase/app-check';
 export declare const VERSION: Version;
-export declare const ɵisMessagingSupportedFactory: {
-    async: () => any;
-    sync: () => any;
-};
-export declare const ɵisRemoteConfigSupportedFactory: {
-    async: () => any;
-    sync: () => any;
-};
-export declare const ɵisAnalyticsSupportedFactory: {
-    async: () => any;
-    sync: () => any;
-};
+export declare const ɵisSupportedError: (module: string) => string;
 export declare function ɵgetDefaultInstanceOf<T = unknown>(identifier: string, provided: T[] | undefined, defaultApp: FirebaseApp): T | undefined;
 export declare const ɵgetAllInstancesOf: <T = unknown>(identifier: string, app?: FirebaseApp) => T[];
+export interface ɵAppCheckInstances extends Array<AppCheck> {
+}
+export declare class ɵAppCheckInstances {
+    constructor();
+}
+export declare const ɵAPP_CHECK_PROVIDER_NAME = "app-check";

package/database/database.module.d.ts

@@ -1,7 +1,7 @@
-import { NgZone, InjectionToken, ModuleWithProviders, Injector } from '@angular/core';
+import { InjectionToken, Injector, ModuleWithProviders, NgZone } from '@angular/core';
+import { FirebaseApp } from '@angular/fire/app';
 import { Database as FirebaseDatabase } from 'firebase/database';
 import { Database } from './database';
-import { FirebaseApp } from '@angular/fire/app';
 import * as i0 from "@angular/core";
 export declare const PROVIDED_DATABASE_INSTANCES: InjectionToken<Database[]>;
 export declare function defaultDatabaseInstanceFactory(provided: FirebaseDatabase[] | undefined, defaultApp: FirebaseApp): Database;

package/docs/app-check.md

@@ -20,7 +20,7 @@ Provide an App Check instance and configuration in the application's `NgModule`
 
 ```ts
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
-import { getAppCheck, provideAppCheck } from '@angular/fire/app-check';
+import { provideAppCheck } from '@angular/fire/app-check';
 
 @NgModule({
   imports: [

package/docs/auth.md

@@ -70,13 +70,13 @@ import { Auth, User, user } from '@angular/fire/auth';
 ...
 
 export class UserComponent implements OnDestroy {
-  private auth: Auth = inject(auth);
+  private auth: Auth = inject(Auth);
   user$ = user(auth);
   userSubscription: Subscription;
   ...
 
   constructor() {
-    this.userSubscription = this.user$.subscribe(aUser: User | null => {
+    this.userSubscription = this.user$.subscribe((aUser: User | null) => {
         //handle user state changes here. Note, that user will be null if there is no currently logged in user.
      console.log(aUser);
     })
@@ -100,7 +100,7 @@ import { Auth, authState } from '@angular/fire/auth';
 ...
 
 export class UserComponent implements OnDestroy {
-  private auth: Auth = inject(auth);
+  private auth: Auth = inject(Auth);
   authState$ = authState(auth);
   authStateSubscription: Subscription;
   ...
@@ -129,7 +129,7 @@ import { Auth, idToken } from '@angular/fire/auth';
 ...
 
 export class UserComponent implements OnDestroy {
-  private auth: Auth = inject(auth);
+  private auth: Auth = inject(Auth);
   idToken$ = idToken(auth);
   idTokenSubscription: Subscription;
   ...
@@ -148,7 +148,7 @@ export class UserComponent implements OnDestroy {
 }
 ```
 
-## Connecting the the emulator suite
+## Connecting the emulator suite
 
 ```ts
 import { connectAuthEmulator, getAuth, provideAuth } from '@angular/fire/auth';
@@ -162,4 +162,4 @@ import { connectAuthEmulator, getAuth, provideAuth } from '@angular/fire/auth';
     }),
   ]
 })
-```
+```

package/docs/database.md

@@ -128,7 +128,7 @@ The `fromRef()` function creates an observable that emits reference changes.
 | **params**      | ref: `Reference\|Query`, event: `ListenEvent` |
 | **return**      | `Observable<QueryChange>`                |
 
-## Connecting the the emulator suite
+## Connecting to the emulator suite
 
 ```ts
 import { connectDatabaseEmulator, getDatabase, provideDatabase } from '@angular/fire/database';

package/docs/deploy/getting-started.md

@@ -91,7 +91,7 @@ To customize the deployment flow, you can use the configuration files you're alr
 
 ### Configuring Cloud Functions
 
-Setting `functionsNodeVersion` and `functionsRuntimeOptions` in your `angular.json` allow you to custimze the version of Node.js Cloud Functions is running and run-time settings like timeout, VPC connectors, and memory.
+Setting `functionsNodeVersion` and `functionsRuntimeOptions` in your `angular.json` allow you to customize the version of Node.js Cloud Functions is running and run-time settings like timeout, VPC connectors, and memory.
 
 ```json
 "deploy": {
@@ -201,4 +201,4 @@ The above configuration specifies the following:
 2. `ng deploy projectName` will deploy the specified project with default configuration.
 3. `ng deploy projectName --configuration=storybook --siteTarget=mySiteTarget` will deploy `projectName` to `mySiteTarget` with configuration`storybook`.
 
-All of the options are optional
+All of the options are optional

package/docs/firestore.md

@@ -59,7 +59,7 @@ export class UserProfileComponent {
 With the reference to Cloud Firestore available in a component it is now possible to connect read from and write to the database.
 
 ### Reading data
-In Cloud Firestore data is stored in `documents` and `documents` are stored in `collections`. The path to data follows `<collection_name>/<document_id>` and continues if there are subcollections. For example, `"users/ABC1245/posts/XYZ6789"` represents:
+In Cloud Firestore data is stored in `documents` and `documents` are stored in `collections`. The path to data follows `<collection_name>/<document_id>` and continues if there are subcollections. For example, `"users/ABC12345/posts/XYZ6789"` represents:
 * `users` collection
 * document id `ABC12345`
 * `posts` collection

package/docs/install-and-setup.md

@@ -87,7 +87,7 @@ Open `/src/app/app.component.html`:
 
 ```html
 <ul>
-  <li class="text" *ngFor="let item of items | async">
+  <li class="text" *ngFor="let item of items$ | async">
     {{item.name}}
   </li>
 </ul>

package/docs/install-firebase-tools.md

@@ -0,0 +1,78 @@
+# Firebase Tools Install and Setup
+
+### 1. Install package
+
+```bash
+npm install -g firebase-tools
+```
+
+or with `yarn`
+
+```bash
+yarn global add firebase-tools
+```
+
+You can also choose to install it as a dependency for your project rather than globally
+
+```bash
+npm install --save-dev firebase-tools
+```
+
+or with `yarn`
+
+```bash
+yarn add -D firebase-tools
+```
+
+### 2. Configure Firebase Tools
+
+In your projects root directory run:
+
+```bash
+firebase init
+```
+
+or if your installed it within your project rather than globally
+
+```bash
+npx firebase init
+```
+
+or with `yarn`
+
+```bash
+yarn firebase init
+```
+
+This will ask you to login if you are not logged in already, the process will take you through a browser
+redirect to log you into Firebase.
+
+### 3. Choose what Firebase features
+
+`firebase-tools` displays Firebase features you want to configure.
+
+```bash
+? Which Firebase features do you want to set up for this directory? Press Space 
+to select features, then Enter to confirm your choices. (Press <space> to select
+, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
+ ◯ Realtime Database: Configure a security rules file for Realtime Database and 
+(optionally) provision default instance
+ ◯ Firestore: Configure security rules and indexes files for Firestore
+ ◯ Functions: Configure a Cloud Functions directory and its files
+ ◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub 
+Action deploys
+ ◯ Hosting: Set up GitHub Action deploys
+(Move up and down to reveal more choices)
+```
+
+### 4. Connect your repo to a Firebase project
+
+The CLI will then walk you through making sure your repo is configured with a Firebase project.
+
+```bash
+? Please select an option: 
+  ◯ Use an existing project 
+  ◯ Create a new project 
+  ◯ Add Firebase to an existing Google Cloud Platform project 
+  ◯ Don't set up a default project
+  ```

package/docs/universal/cloud-functions.md

@@ -40,8 +40,8 @@ Let's go ahead and modify your `package.json` to build for Cloud Functions:
 ```js
 "scripts": {
   // ... omitted
-  "build": "ng build && npm run copy:hosting && npm run build:ssr && npm run build:functions",
-  "copy:hosting": "cp -r ./dist/YOUR_PROJECT_NAME/* ./public && rm ./public/index.html",
+  "build": "ng build && npm run build:ssr && npm run copy:hosting && npm run build:functions",
+  "copy:hosting": "cp -r ./dist/YOUR_PROJECT_NAME/* ./public && rm -f ./public/index.html",
   "build:functions": "npm run --prefix functions build"
 },
 ```
@@ -51,21 +51,42 @@ Change the build script in your `functions/package.json` to the following:
 ```js
 "scripts": {
     // ... omitted
-    "build": "rm -r ./dist && cp -r ../dist . && tsc",
+    "build": "rm -rf ./dist && cp -r ../dist . && tsc",
 }
 ```
 
+You will either need to install the dependencies from the `functions/package.json` or add them to your root `package.json`.
+
 Finally, add the following to your `functions/src/index.ts`:
 
 ```ts
 export const universal = functions.https.onRequest((request, response) => {
-  require(`${process.cwd()}/dist/YOUR_PROJECT_NAME-webpack/server`).app(request, response);
+  require(`${process.cwd()}/dist/YOUR_PROJECT_NAME/server/main`).app()(request, response);
 });
 ```
 
-We you should now be able to run `npm run build` to build your project for Firebase Hosting and Cloud Functions.
+In the `server.ts` file generated by the Angular CLI ensure that the `index.html` is being read from the correct place.
+
+As of writing the Angular CLI generates:
+
+```typescript
+const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index.html';
+```
+
+this needs to be changed to:
+
+```typescript
+const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : join(distFolder, 'index.html');
+```
+
+So that the `index.html` is read from the correct `dist` folder.
+
+You should now be able to run `npm run build` to build your project for Firebase Hosting and Cloud Functions.
+
+To test, spin up the emulator with `firebase serve`. Once you've confirmed its working go ahead and `firebase deploy`.
 
-To test, spin up the emulator with `firebase serve`. Once you've confirmed it's working go ahead and `firebase deploy`.
+_Note: Universal will now SSR your application and serve it, depending on how you have your deployment setup some assets may fail to 
+serve because the Cloud Function is at a different route than the `APP_BASE_REF` configured._
 
 ### [Next Step: Prerendering your Universal application](prerendering.md)
 

package/docs/universal/getting-started.md

@@ -7,147 +7,22 @@ Server-side rendering (SSR) is the process of converting a JavaScript app to pla
 - @angular/cli >= v6.0
 - @angular/fire >= v5.0.0
 
-## 1. Generate the Angular Universal Server Module
+## 1. Add Angular Universal to your project
 
-First, create a server module with the Angular CLI.
+Follow the steps from the [Angular Universal Tutorial](https://angular.io/guide/universal) to add Universal to your
+project.
 
 ```
-ng generate universal --client-project <your-project>
+ng add @nguniversal/express-engine
 ```
 
-## 2. Build a Server with ExpressJS
+This will create all the files you need and setup all the configurations for Universal rendering for your application.
 
-[ExpressJS](https://expressjs.com/) is a lightweight web framework that can serve http requests in Node. First, install the dev dependencies:
+## 2. Next Steps
 
-```bash
-npm install --save-dev @nguniversal/express-engine @nguniversal/module-map-ngfactory-loader express webpack-cli ts-loader ws xhr2
-```
-
-Create a file called `server.ts` in the root of you project.
-
-```ts
-// These are important and needed before anything else
-import 'zone.js/dist/zone-node';
-import 'reflect-metadata';
-
-import { enableProdMode } from '@angular/core';
-import { ngExpressEngine } from '@nguniversal/express-engine';
-import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
-
-import * as express from 'express';
-import { join } from 'path';
-import { readFileSync } from 'fs';
-
-// Polyfills required for Firebase
-(global as any).WebSocket = require('ws');
-(global as any).XMLHttpRequest = require('xhr2');
-
-// Faster renders in prod mode
-enableProdMode();
-
-// Export our express server
-export const app = express();
-
-const DIST_FOLDER = join(process.cwd(), 'dist');
-const APP_NAME = 'YOUR_PROJECT_NAME'; // TODO: replace me!
-
-const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require(`./dist/${APP_NAME}-server/main`);
-
-// index.html template
-const template = readFileSync(join(DIST_FOLDER, APP_NAME, 'index.html')).toString();
-
-app.engine('html', ngExpressEngine({
-  bootstrap: AppServerModuleNgFactory,
-  providers: [
-    provideModuleMap(LAZY_MODULE_MAP)
-  ]
-}));
-
-app.set('view engine', 'html');
-app.set('views', join(DIST_FOLDER, APP_NAME));
-
-// Serve static files 
-app.get('*.*', express.static(join(DIST_FOLDER, APP_NAME)));
-
-// All regular routes use the Universal engine
-app.get('*', (req, res) => {
-    res.render(join(DIST_FOLDER, APP_NAME, 'index.html'), { req });
-});
-
-// If we're not in the Cloud Functions environment, spin up a Node server
-if (!process.env.FUNCTION_NAME) {
-  const PORT = process.env.PORT || 4000;
-  app.listen(PORT, () => {
-    console.log(`Node server listening on http://localhost:${PORT}`);
-  });
-}
-```
-
-## 3. Add a Webpack Config for the Express Server
-
-Create a new file named `webpack.server.config.js` to bundle the express app from previous step.
-
-
-```js
-const path = require('path');
-const webpack = require('webpack');
-
-const APP_NAME = 'YOUR_PROJECT_NAME'; // TODO: replace me!
-
-module.exports = {
-  entry: {  server: './server.ts' },
-  resolve: { extensions: ['.js', '.ts'] },
-  mode: 'development',
-  target: 'node',
-  externals: [
-    /* Firebase has some troubles being webpacked when in
-       in the Node environment, let's skip it.
-       Note: you may need to exclude other dependencies depending
-       on your project. */
-    /^firebase/
-  ],
-  output: {
-    // Export a UMD of the webpacked server.ts & deps, for
-    // rendering in Cloud Functions
-    path: path.join(__dirname, `dist/${APP_NAME}-webpack`),
-    library: 'app',
-    libraryTarget: 'umd',
-    filename: '[name].js'
-  },
-  module: {
-    rules: [
-      { test: /\.ts$/, loader: 'ts-loader' }
-    ]
-  },
-  plugins: [
-    new webpack.ContextReplacementPlugin(
-      /(.+)?angular(\\|\/)core(.+)?/,
-      path.join(__dirname, 'src'), // location of your src
-      {} // a map of your routes
-    ),
-    new webpack.ContextReplacementPlugin(
-      /(.+)?express(\\|\/)(.+)?/,
-      path.join(__dirname, 'src'),
-      {}
-    )
-  ]
-}
-```
-
-## 4.0 Build Scripts
-
-Update your `package.json` with the following build scripts, replacing `YOUR_PROJECT_NAME` with the name of your project.
-
-```js
-"scripts": {
-  // ... omitted
-  "build": "ng build && npm run build:ssr",
-  "build:ssr": "ng run YOUR_PROJECT_NAME:server && npm run webpack:ssr",
-  "webpack:ssr": "webpack --config webpack.server.config.js",
-  "serve:ssr": "node dist/YOUR_PROJECT_NAME-webpack/server.js"
-},
-```
+Test your app locally by running `npm run dev:ssr`.
 
-Test your app locally by running `npm run build && npm run serve:ssr`. 
+_Note: `dev:ssr` is a command that was added to your `package.json` by the `ng add` command that will run the dev server
+for your Angular with Universal._ 
 
 ### [Next Step: Deploying your Universal application on Cloud Functions for Firebase](cloud-functions.md)