feat(schematics): ng-add schematics

README.md

@@ -30,7 +30,7 @@
 ## Install
 
 ```bash
-npm install firebase @angular/fire --save
+ng add @angular/fire
 ```
 
 ## Example use:

docs/install-and-setup-manual.md

@@ -0,0 +1,195 @@
+# 1. Installation and Setup
+
+> Using Ionic and the Ionic CLI? Check out these [specific instructions](ionic/cli.md) for Ionic and their CLI.
+
+### 0. Prerequisites
+
+AngularFire provides multiple module formats for different types of builds. The guide is based off the Angular CLI. It is possible to do a manual setup with Webpack or a SystemJS build as well.
+
+```bash
+npm install @angular/cli
+```
+
+### 1. Create a new project
+
+```bash
+ng new <project-name>
+cd <project-name>
+```
+
+The Angular CLI's `new` command will set up the latest Angular build in a new project structure.
+
+### 2. Test your setup
+
+```bash
+ng serve
+open http://localhost:4200
+```
+
+You should see a message on the page that says *App works!*
+
+### 3. Install AngularFire and Firebase
+
+```bash
+npm install @angular/fire firebase --save
+```
+
+Now that you have a new project setup, install AngularFire and Firebase from npm.
+
+### 4. Add Firebase config to environments variable
+
+Open `/src/environments/environment.ts` and add 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**.
+
+```ts
+export const environment = {
+  production: false,
+  firebase: {
+    apiKey: '<your-key>',
+    authDomain: '<your-project-authdomain>',
+    databaseURL: '<your-database-URL>',
+    projectId: '<your-project-id>',
+    storageBucket: '<your-storage-bucket>',
+    messagingSenderId: '<your-messaging-sender-id>'
+  }
+};
+```
+
+### 5. Setup @NgModule for the AngularFireModule
+
+Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your Firebase configuration.
+
+```ts
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+import { AngularFireModule } from '@angular/fire';
+import { environment } from '../environments/environment';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    AngularFireModule.initializeApp(environment.firebase)
+  ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+#### Custom `FirebaseApp` names
+
+You can optionally provide a custom FirebaseApp name with `initializeApp`.
+
+```ts
+@NgModule({
+  imports: [
+    BrowserModule,
+    AngularFireModule.initializeApp(environment.firebase, 'my-app-name')
+  ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+### 6. Setup individual `@NgModules`
+
+After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
+
+ - `AngularFirestoreModule`
+ - `AngularFireAuthModule`
+ - `AngularFireDatabaseModule`
+ - `AngularFireStorageModule`
+ - `AngularFireMessagingModule` (Future release)
+
+#### Adding the Firebase Database and Auth Modules
+
+For example if your application was using both Firebase authentication and the Firebase database you would add:
+
+```ts
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+import { AngularFireModule } from '@angular/fire';
+import { AngularFirestoreModule } from '@angular/fire/firestore';
+import { AngularFireStorageModule } from '@angular/fire/storage';
+import { AngularFireAuthModule } from '@angular/fire/auth';
+import { environment } from '../environments/environment';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything
+    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
+    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
+    AngularFireStorageModule // imports firebase/storage only needed for storage features
+  ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+### 7. Inject `AngularFirestore`
+
+Open `/src/app/app.component.ts`, and make sure to modify/delete any tests to get the sample working (tests are still important, you know):
+
+```ts
+import { Component } from '@angular/core';
+import { AngularFirestore } from '@angular/fire/firestore';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+  constructor(db: AngularFirestore) {
+
+  }
+}
+```
+
+### 8. Bind a Firestore collection to a list
+
+In `/src/app/app.component.ts`:
+
+```ts
+import { Component } from '@angular/core';
+import { AngularFirestore } from '@angular/fire/firestore';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+  items: Observable<any[]>;
+  constructor(db: AngularFirestore) {
+    this.items = db.collection('items').valueChanges();
+  }
+}
+```
+
+Open `/src/app/app.component.html`:
+
+```html
+<ul>
+  <li class="text" *ngFor="let item of items | async">
+    {{item.name}}
+  </li>
+</ul>
+```
+
+### 9. Run your app
+
+```bash
+ng serve
+```
+
+Run the serve command and navigate to `localhost:4200` in your browser.
+
+And that's it! If it's totally *borked*, file an issue and let us know.
+
+### [Next Step: Documents in AngularFirestore](firestore/documents.md)

docs/install-and-setup.md

@@ -2,6 +2,8 @@
 
 > Using Ionic and the Ionic CLI? Check out these [specific instructions](ionic/cli.md) for Ionic and their CLI.
 
+> 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
 
 AngularFire provides multiple module formats for different types of builds. The guide is based on the Angular CLI. It is possible to do a manual setup with Webpack or a SystemJS build as well.
@@ -28,73 +30,21 @@ open http://localhost:4200
 
 You should see a message on the page that says *App works!*
 
-### 3. Install AngularFire and Firebase
+### 3. Add AngularFire
 
 ```bash
-npm install @angular/fire firebase --save
+ng add @angular/fire
 ```
 
-Now that you have a new project setup, install AngularFire and Firebase from npm.
-
-### 4. Add Firebase config to environments variable
-
-Open `/src/environments/environment.ts` and add 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**.
-
-```ts
-export const environment = {
-  production: false,
-  firebase: {
-    apiKey: '<your-key>',
-    authDomain: '<your-project-authdomain>',
-    databaseURL: '<your-database-URL>',
-    projectId: '<your-project-id>',
-    storageBucket: '<your-storage-bucket>',
-    messagingSenderId: '<your-messaging-sender-id>'
-  }
-};
-```
-
-### 5. Setup @NgModule for the AngularFireModule
-
-Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your Firebase configuration.
-
-```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { AngularFireModule } from '@angular/fire';
-import { environment } from '../environments/environment';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    AngularFireModule.initializeApp(environment.firebase)
-  ],
-  declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {}
-```
+This command will install `@angular/fire` and `firebase` from npm, prepare configuration variables and import AngularFire module(s) into your App's NgModule.
 
 #### Custom `FirebaseApp` names
 
-You can optionally provide a custom FirebaseApp name with `initializeApp`.
+You can optionally provide a custom FirebaseApp name by providing the `--firebaseApp=my-app-name` flag.
 
-```ts
-@NgModule({
-  imports: [
-    BrowserModule,
-    AngularFireModule.initializeApp(environment.firebase, 'my-app-name')
-  ],
-  declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {}
-```
+#### Setup individual `@NgModules`
 
-### 6. Setup individual `@NgModules`
-
-After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
+By providing the `--all` flag you can also add modules for the individual @NgModules that your application needs:
 
  - `AngularFireAuthModule`
  - `AngularFireDatabaseModule`
@@ -103,35 +53,25 @@ After adding the AngularFireModule you also need to add modules for the individu
  - `AngularFireStorageModule`
  - `AngularFireMessagingModule`
 
-#### Adding the Firebase Database and Auth Modules
+### 4. Edit Firebase configuration
 
-For example if your application was using both Firebase authentication and the Firebase database you would add:
+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**.
 
 ```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { AngularFireModule } from '@angular/fire';
-import { AngularFirestoreModule } from '@angular/fire/firestore';
-import { AngularFireStorageModule } from '@angular/fire/storage';
-import { AngularFireAuthModule } from '@angular/fire/auth';
-import { environment } from '../environments/environment';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything
-    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
-    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
-    AngularFireStorageModule // imports firebase/storage only needed for storage features
-  ],
-  declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {}
+export const environment = {
+  firebase: {
+    apiKey: '<your-key>',
+    authDomain: '<your-project-authdomain>',
+    databaseURL: '<your-database-URL>',
+    projectId: '<your-project-id>',
+    storageBucket: '<your-storage-bucket>',
+    messagingSenderId: '<your-messaging-sender-id>',
+  },
+  production: false
+};
 ```
 
-### 7. Inject `AngularFirestore`
+### 5. Inject `AngularFirestore`
 
 Open `/src/app/app.component.ts`, and make sure to modify/delete any tests to get the sample working (tests are still important, you know):
 
@@ -145,13 +85,11 @@ import { AngularFirestore } from '@angular/fire/firestore';
   styleUrls: ['app.component.css']
 })
 export class AppComponent {
-  constructor(db: AngularFirestore) {
-
-  }
+  constructor(db: AngularFirestore) {}
 }
 ```
 
-### 8. Bind a Firestore collection to a list
+### 6. Bind a Firestore collection to a list
 
 In `/src/app/app.component.ts`:
 
@@ -183,14 +121,14 @@ Open `/src/app/app.component.html`:
 </ul>
 ```
 
-### 9. Run your app
+### 7. Run your app
 
 ```bash
 ng serve
 ```
 
 Run the serve command and navigate to `localhost:4200` in your browser.
 
-And that's it! If it's totally *borked*, file an issue and let us know.
+And that's it! If it's totally _borked_, file an issue and let us know.
 
 ### [Next Step: Documents in AngularFirestore](firestore/documents.md)