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-and-setup.md

@@ -2,7 +2,7 @@
 
 > Using Ionic and the Ionic CLI? Check out these [specific instructions](ionic/cli.md) for Ionic and their CLI.
 
-> Following instructions use `ng add` command that automates several steps for you. If you want to set up things manually refer to [these steps](install-and-setup-manual.md) instead.
+> The following instructions use the `ng add` command that automates several steps for you. If you want to set up things manually, refer to [these steps](install-and-setup-manual.md) instead.
 
 ### 0. Prerequisites
 
@@ -52,7 +52,7 @@ By providing the `--all` flag you can also add modules for the individual @NgMod
  - `AngularFireStorageModule`
  - `AngularFireMessagingModule` (Future release)
 
-### 4. Edit Firebase config in environments variable
+### 4. Edit Firebase configuration
 
 Open `/src/environments/environment.ts` and edit your Firebase configuration. You can find your project configuration in [the Firebase Console](https://console.firebase.google.com). From the project overview page, click **Add Firebase to your web app**.
 
@@ -66,7 +66,7 @@ export const environment = {
     storageBucket: '<your-storage-bucket>',
     messagingSenderId: '<your-messaging-sender-id>',
   },
-  production: false,
+  production: false
 };
 ```
 
@@ -81,7 +81,7 @@ import { AngularFirestore } from 'angularfire2/firestore';
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css'],
+  styleUrls: ['app.component.css']
 })
 export class AppComponent {
   constructor(db: AngularFirestore) {}
@@ -100,7 +100,7 @@ import { Observable } from 'rxjs';
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css'],
+  styleUrls: ['app.component.css']
 })
 export class AppComponent {
   items: Observable<any[]>;

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'.