Merge branch 'master' into feature/schematics_ng-add

Author: sulco

CHANGELOG.md

@@ -1,3 +1,20 @@
+<a name="5.0.0-rc.12"></a>
+# [5.0.0-rc.12](https://github.com/angular/angularfire2/compare/5.0.0-rc.11...5.0.0-rc.12) (2018-08-24)
+
+### Bug Fixes
+
+* **afs:** Gracefully handle duplicate emissions on modified/deleted ([#1825](https://github.com/angular/angularfire2/issues/1825)) ([76ff6c1](https://github.com/angular/angularfire2/commit/76ff6c1))
+* **core:** If an AngularFire observable was empty or threw, it could block Universal rendering ([#1832](https://github.com/angular/angularfire2/issues/1832)) ([36a8ff8](https://github.com/angular/angularfire2/commit/36a8ff8))
+* **core:** Fix for the Firebase ES export problems in Node ([#1821](https://github.com/angular/angularfire2/issues/1821)) ([f1014ee](https://github.com/angular/angularfire2/commit/f1014ee))
+* **storage:** Fix for zone issues on downloadURL and metadata, which blocked Universal rendering ([#1835](https://github.com/angular/angularfire2/issues/1835)) ([441607a](https://github.com/angular/angularfire2/commit/441607a))
+
+
+### Features
+
+* **firestore:** Added a `get` Observable ([#1824](https://github.com/angular/angularfire2/issues/1824)) ([9f34be8](https://github.com/angular/angularfire2/commit/9f34be8))
+* **messaging:** Introducing AngularFireMessaging ([#1749](https://github.com/angular/angularfire2/issues/1749)) ([26f7613](https://github.com/angular/angularfire2/commit/26f7613))
+
+
 <a name="5.0.0-rc.11"></a>
 # [5.0.0-rc.11](https://github.com/angular/angularfire2/compare/5.0.0-rc.10...5.0.0-rc.11) (2018-06-13)
 

README.md

@@ -86,9 +86,12 @@ Firebase offers two cloud-based, client-accessible database solutions that suppo
 
 - [Getting started with Firebase Authentication](docs/auth/getting-started.md)
 
-## Upload files
+### Upload files
 - [Getting started with Cloud Storage](docs/storage/storage.md)
 
+### Universal
+- [Server-side Rendering with Universal](docs/server-side-rendering.md)
+
 ### Deploy to Firebase Hosting
 
 - [Deploying AngularFire to Firebase Hosting](docs/deploying-angularfire-to-firebase.md)

docs/deploying-angularfire-to-firebase.md

@@ -1,20 +1,28 @@
 # 7. Deploy AngularFire to Firebase
 
-### 0. Build your Angular project for prod
+### 0. Build your Angular project for production
 
-Before you can deploy your angular project, you need to build a version with your prod environment variables. 
-Make sure to add your production firebase configuraiton to the src/environments/environment.prod.ts before you build. 
+Before you can deploy your angular project, you need to build a version with your prod environment variables.
+Make sure to add your production firebase configuraiton to the src/environments/environment.prod.ts before you build.
 
 ```bash
 # build the angular project, creates a dist folder in your directory
 ng build -prod
 ```
 
-### 1. Run Firebase init
+### 1. Initializing a Firebase project
 
 You must initialize Firebase Hosting in order to deploy your application. In order to do this run the `firebase init` command.
-This command prompts you to give the public directory. Choose the /dist directory created by the `ng build -prod`. 
-`firebase init` will also ask you if you want to overwrite your index file. Type `no` since your angular app includes a index file.
+
+Note: If you haven't installed the Firebase CLI yet, run this command:
+
+```bash
+npm install --global firebase-tools
+```
+
+- This command prompts you to enter a public directory. Enter `dist` (generated by `ng build -prod`).
+- The command will also ask you if you want to overwrite your index file. Type `n` since your Angular app includes a index file.
+- This command also prompts you whether to configure the project as a single-page app. Enter `y` if you're using Angular Router or similar. Otherwise, enter `n`.
 
 ### 2. Deploy your Project
 

docs/firestore/collections.md

@@ -74,6 +74,7 @@ interface DocumentSnapshot {
 There are multiple ways of streaming collection data from Firestore. 
 
 ### `valueChanges()`
+
 **What is it?** - The current state of your collection. Returns an Observable of data as a synchronized array of JSON objects. All Snapshot metadata is stripped and just the method provides only the data.
 
 **Why would you use it?** - When you just need a list of data. No document metadata is attached to the resulting array which makes it simple to render to a view.
@@ -83,6 +84,7 @@ There are multiple ways of streaming collection data from Firestore.
 **Best practices** - Use this method to display data on a page. It's simple but effective. Use `.snapshotChanges()` once your needs become more complex.
 
 #### Example of persisting a Document Id
+
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
@@ -123,6 +125,7 @@ export class AppComponent {
 ```
 
 ### `snapshotChanges()`
+
 **What is it?** - The current state of your collection. Returns an Observable of data as a synchronized array of `DocumentChangeAction[]`. 
 
 **Why would you use it?** - When you need a list of data but also want to keep around metadata. Metadata provides you the underyling `DocumentReference`, document id, and array index of the single document. Having the document's id around makes it easier to use data manipulation methods. This method gives you more horsepower with other Angular integrations such as ngrx, forms, and animations due to the `type` property. The `type` property on each `DocumentChangeAction` is useful for ngrx reducers, form states, and animation states.
@@ -132,6 +135,7 @@ export class AppComponent {
 **Best practices** - Use an observable operator to transform your data from `.snapshotChanges()`. Don't return the `DocumentChangeAction[]` to the template. See the example below.
 
 #### Example
+
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
@@ -171,13 +175,15 @@ export class AppComponent {
 ```
 
 ### `stateChanges()`
+
 **What is it?** - Returns an Observable of the most recent changes as a `DocumentChangeAction[]`. 
 
 **Why would you use it?** - The above methods return a synchronized array sorted in query order. `stateChanges()` emits changes as they occur rather than syncing the query order. This works well for ngrx integrations as you can build your own data structure in your reducer methods.
 
 **When would you not use it?** - When you just need a list of data. This is a more advanced usage of AngularFirestore.
 
 #### Example
+
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
@@ -214,13 +220,15 @@ export class AppComponent {
 ```
 
 ### `auditTrail()`
+
 **What is it?** - Returns an Observable of `DocumentChangeAction[]` as they occur. Similar to `stateChanges()`, but instead it keeps around the trail of events as an array.
 
 **Why would you use it?** - This method is like `stateChanges()` except it is not ephemeral. It collects each change in an array as they occur. This is useful for ngrx integrations where you need to replay the entire state of an application. This also works as a great debugging tool for all applications. You can simple write `afs.collection('items').auditTrail().subscribe(console.log)` and check the events in the console as they occur.
 
 **When would you not use it?** - When you just need a list of data. This is a more advanced usage of AngularFirestore. 
 
 #### Example
+
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
@@ -260,15 +268,17 @@ export class AppComponent {
 
 There are three `DocumentChangeType`s in Firestore: `added`, `removed`, and `modified`. Each streaming method listens to all three by default. However, you may only be intrested in one of these events. You can specify which events you'd like to use through the first parameter of each method:
 
-#### Basic sample
+#### Basic example
+
 ```ts
   constructor(private afs: AngularFirestore): {
     this.itemsCollection = afs.collection<Item>('items');
     this.items = this.itemsCollection.snapshotChanges(['added', 'removed']);
   }
 ```
 
-#### Component Sample
+#### Component example
+
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
@@ -304,7 +314,8 @@ For example, a user updates the third item in a list. In a state based method li
 
 To add a new document to a collection with a generated id use the `add()` method. This method uses the type provided by the generic class to validate it's type structure.
 
-#### Basic Sample
+#### Basic example
+
 ```ts
   constructor(private afs: AngularFirestore): {
     const shirtsCollection = afs.collection<Item>('tshirts');

docs/firestore/documents.md

@@ -12,6 +12,8 @@ import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
 import { Observable } from 'rxjs';
 
+export interface Item { name: string; }
+
 @Component({
   selector: 'app-root',
   template: `
@@ -68,13 +70,15 @@ interface DocumentSnapshot {
 There are multiple ways of streaming collection data from Firestore.
 
 ### `valueChanges()`
+
 **What is it?** - Returns an Observable of document data. All Snapshot metadata is stripped. This method provides only the data.
 
 **Why would you use it?** - When you just need the object data. No document metadata is attached which makes it simple to render to a view.
 
 **When would you not use it?** - When you need the `id` of the document to use data manipulation methods. This method assumes you either are saving the `id` to the document data or using a "readonly" approach.
 
 ### `snapshotChanges()`
+
 **What is it?** - Returns an Observable of data as a `DocumentChangeAction`. 
 
 **Why would you use it?** - When you need the document data but also want to keep around metadata. This metadata provides you the underyling `DocumentReference` and document id. Having the document's id around makes it easier to use data manipulation methods. This method gives you more horsepower with other Angular integrations such as ngrx, forms, and animations due to the `type` property. The `type` property on each `DocumentChangeAction` is useful for ngrx reducers, form states, and animation states.

docs/firestore/querying-collections.md

@@ -11,7 +11,7 @@ Queries are created by building on the [`firebase.firestore.CollectionReference`
 afs.collection('items', ref => ref.where('size', '==', 'large'))
 ```
 
-**Query Options:**
+### Query options
 
 | method   | purpose            |
 | ---------|--------------------|
@@ -77,7 +77,7 @@ size$.next('large');
 size$.next('small');
 ```
 
-**Example app:**
+### Example app
 
 [See this example in action on StackBlitz](https://stackblitz.com/edit/angularfire-db-api-fbad9p).
 
@@ -156,9 +156,9 @@ export class AppComponent {
 }
 ```
 
-**To run the above example as is, you need to have sample data in you firebase database with the following structure:**
- 
- ```json
+**To run the above example as is, you need to have sample data in your Firebase database with the following structure:**
+
+```json
 {
   "items": {
     "a" : {
@@ -178,6 +178,6 @@ export class AppComponent {
     }
   }
 }
- ```
+```
 
 ### [Next Step: Getting started with Firebase Authentication](../auth/getting-started.md)

docs/install-angular-cli-windows10.md

@@ -1,6 +1,6 @@
-# Installing angular-cli on Windows 10
+# Installing Angular CLI on Windows 10
 
-> There had been installation issues of angular-cli on Windows 10 system. Most of the time these errors are related to Python dependecies and node-gyp.
+> There had been installation issues of `@angular/cli` on Windows 10 system. Most of the time these errors are related to Python dependecies and node-gyp.
 
 Something as below :
 
@@ -33,39 +33,42 @@ ngular-cli\node_modules\compression-webpack-plugin\node_modules\node-zopfli
 .......................
 ```
 
-To resolve this issue, make sure you're upgraded to latest version of **NPM** and try installing angular-cli. This seems to have worked on certain scenarios.
+To resolve this issue, make sure you've upgraded to the latest version of **NPM** and try installing `@angular/cli` again. This seems to have worked on certain scenarios.
 
-If the above doesn't works then the below steps should help. Please ensure all the commands are executed as an **Administrator**.
+If the above doesn't work then the below steps should help. Please ensure all the commands are executed as an **Administrator**.
 
-### Steps:
+## Steps:
 
-### 1) Install node-gyp from [here](https://github.com/nodejs/node-gyp)
+### 1) Install `node-gyp` from [here](https://github.com/nodejs/node-gyp) using NPM
 
-```ts
+```bash
 npm install -g node-gyp
 ```
 
-### 2) Install Windows build tool from [here](https://github.com/felixrieseberg/windows-build-tools)
+### 2) Install Windows build tools from [here](https://github.com/felixrieseberg/windows-build-tools) using NPM
 
-```ts
+```bash
 npm install --global windows-build-tools
 ```
 
-*This will also install python
+*This will also install Python
 
-### 3) Install Angular-CLI
+### 3) Install Angular CLI
 
-npm install -g angular-cli
+```bash
+npm install -g @angular/cli
+```
 
-This should install angular-cli without errors.
+This should install `@angular/cli` without errors.
 
 #### Post this installation, follow the installation [guide](https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md) to install AngularFire and everything should work as expected.
 
 
 ### Note:
-When you start your app using "ng serve" in the console, you might still see the below errors. Despite these errors, the application should work as expected and should be able to talk to Firebase.
 
-```ts
+When you start your app using `ng serve` in the console, you might still see the below errors. Despite these errors, the application should work as expected and should be able to talk to Firebase.
+
+```bash
 ERROR in [default] C:\angularFire2Test\node_modules\angularfire2\interfaces.d.ts:12:34
 Cannot find namespace 'firebase'.
 

docs/rtdb/lists.md

@@ -6,7 +6,7 @@ The `AngularFireList` service is not created by itself, but through the `Angular
 
 The guide below demonstrates how to retrieve, save, and remove data as lists.
 
-## Injecting the AngularFireDatabase service
+## Injecting the `AngularFireDatabase` service
 
 **Make sure you have bootstrapped your application for AngularFire. See the Installation guide for bootstrap setup.**
 
@@ -25,9 +25,7 @@ import { AngularFireDatabase } from 'angularfire2/database';
   styleUrls: ['app.component.css']
 })
 export class AppComponent {
-  constructor(db: AngularFireDatabase) {
-    
-  }
+  constructor(db: AngularFireDatabase) { }
 }
 ```
 
@@ -74,35 +72,40 @@ export class AppComponent {
 ```
 
 ## `AngularFireAction` - Action based API
+
 AngularFire provides methods that stream data back as redux compatible actions. This gives you extra horsepower when using libraries like Animations, ngrx, and ReactiveForms. 
 
 ### `valueChanges()`
+
 **What is it?** - Returns an Observable of data as a synchronized array of JSON objects. All Snapshot metadata is stripped and just the method provides only the data.
 
 **Why would you use it?** - When you just need a list of data. No snapshot metadata is attached to the resulting array which makes it simple to render to a view.
 
 **When would you not use it?** - When you need a more complex data structure than an array or you need the `key` of each snapshot for data manipulation methods. This method assumes you either are saving the `key` for the snapshot data or using a "readonly" approach.
 
 ### `snapshotChanges()`
-**What is it?** - Returns an Observable of data as a synchronized array of `AngularFireAction<DatabaseSnapshot>[]`. 
+
+**What is it?** - Returns an Observable of data as a synchronized array of `AngularFireAction<DatabaseSnapshot>[]`.
 
 **Why would you use it?** - When you need a list of data but also want to keep around metadata. Metadata provides you the underyling `DatabaseReference` and snapshot key. Having the snapshot's `key` around makes it easier to use data manipulation methods. This method gives you more horsepower with other Angular integrations such as ngrx, forms, and animations due to the `type` property. The `type` property on each `AngularFireAction` is useful for ngrx reducers, form states, and animation states.
 
 **When would you not use it?** - When you need a more complex data structure than an array or if you need to process changes as they occur. This array is synchronized with the remote and local changes in the Firebase Database.
 
 ### `stateChanges()`
-**What is it?** - Returns an Observable of the most recent change as an `AngularFireAction`. 
+
+**What is it?** - Returns an Observable of the most recent change as an `AngularFireAction`.
 
 **Why would you use it?** - The above methods return a singular `AngularFireAction` from each child event that occurs. `stateChanges()` emits changes as they occur rather than syncing the query order. This works well for ngrx integrations as you can build your own data structure in your reducer methods.
 
-**When would you not use it?** - When you just need a list of data. This is a more advanced usage of `AngularFireDatabase`. 
+**When would you not use it?** - When you just need a list of data. This is a more advanced usage of `AngularFireDatabase`.
 
 ### `auditTrail()`
+
 **What is it?** - Returns an Observable of `AngularFireAction[]` as they occur. Similar to `stateChanges()`, but instead it keeps around the trail of events as an array.
 
 **Why would you use it?** - This method is like `stateChanges()` except it is not ephemeral. It collects each change in an array as they occur. This is useful for ngrx integrations where you need to replay the entire state of an application. This also works as a great debugging tool for all applications. You can simple write `db.list('items').auditTrail().subscribe(console.log)` and check the events in the console as they occur.
 
-**When would you not use it?** - When you just need a list of data. This is a more advanced usage of AngularFireDatabase. 
+**When would you not use it?** - When you just need a list of data. This is a more advanced usage of AngularFireDatabase.
 
 ### Limiting events
 
@@ -133,6 +136,7 @@ The table below highlights some of the common methods on the `AngularFireList`.
 | `remove(key: string?)` | Deletes the item by key. If no parameter is provided, the entire list will be deleted. |
 
 ## Returning promises
+
 Each data operation method in the table above returns a promise. However,
 you should rarely need to use the completion promise to indicate success, 
 because the realtime database keeps the list in sync. 
@@ -198,7 +202,7 @@ const itemsRef = db.list('items');
 itemsRef.remove();
 ```
 
-**Example app**
+### Example
 
 ```ts
 import { Component } from '@angular/core';
@@ -239,8 +243,8 @@ export class AppComponent {
   updateItem(key: string, newText: string) {
     this.itemsRef.update(key, { text: newText });
   }
-  deleteItem(key: string) {    
-    this.itemsRef.remove(key); 
+  deleteItem(key: string) {
+    this.itemsRef.remove(key);
   }
   deleteEverything() {
     this.itemsRef.remove();