Skip to content

Commit 27e48e8

Browse files
sulcosulco
committed
docs(): update setup instructions to include ng add case
1 parent 1650f30 commit 27e48e8

File tree

3 files changed

+225
-93
lines changed

3 files changed

+225
-93
lines changed

Diff for: ‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ Status: Release candidate
2727
## Install
2828

2929
```bash
30-
npm install firebase angularfire2 --save
30+
ng add angularfire2
3131
```
3232

3333
## Example use:

Diff for: ‎docs/install-and-setup-manual.md

+193
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
# 1. Installation and Setup
2+
3+
> Using Ionic and the Ionic CLI? Check out these [specific instructions](ionic/cli.md) for Ionic and their CLI.
4+
5+
### 0. Prerequisites
6+
7+
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.
8+
9+
```bash
10+
npm install @angular/cli
11+
```
12+
13+
### 1. Create a new project
14+
15+
```bash
16+
ng new <project-name>
17+
cd <project-name>
18+
```
19+
20+
The Angular CLI's `new` command will set up the latest Angular build in a new project structure.
21+
22+
### 2. Test your Setup
23+
24+
```bash
25+
ng serve
26+
open http://localhost:4200
27+
```
28+
29+
You should see a message that says *App works!*
30+
31+
### 3. Install AngularFire and Firebase
32+
33+
```bash
34+
npm install angularfire2 firebase --save
35+
```
36+
37+
Now that you have a new project setup, install AngularFire and Firebase from npm.
38+
39+
### 4. Add Firebase config to environments variable
40+
41+
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**.
42+
43+
```ts
44+
export const environment = {
45+
production: false,
46+
firebase: {
47+
apiKey: '<your-key>',
48+
authDomain: '<your-project-authdomain>',
49+
databaseURL: '<your-database-URL>',
50+
projectId: '<your-project-id>',
51+
storageBucket: '<your-storage-bucket>',
52+
messagingSenderId: '<your-messaging-sender-id>'
53+
}
54+
};
55+
```
56+
57+
### 5. Setup @NgModule for the AngularFireModule
58+
59+
Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your Firebase configuration.
60+
61+
```ts
62+
import { BrowserModule } from '@angular/platform-browser';
63+
import { NgModule } from '@angular/core';
64+
import { AppComponent } from './app.component';
65+
import { AngularFireModule } from 'angularfire2';
66+
import { environment } from '../environments/environment';
67+
68+
@NgModule({
69+
imports: [
70+
BrowserModule,
71+
AngularFireModule.initializeApp(environment.firebase)
72+
],
73+
declarations: [ AppComponent ],
74+
bootstrap: [ AppComponent ]
75+
})
76+
export class AppModule {}
77+
```
78+
79+
#### Custom FirebaseApp Names
80+
You can optionally provide a custom FirebaseApp name with `initializeApp`.
81+
82+
```ts
83+
@NgModule({
84+
imports: [
85+
BrowserModule,
86+
AngularFireModule.initializeApp(environment.firebase, 'my-app-name')
87+
],
88+
declarations: [ AppComponent ],
89+
bootstrap: [ AppComponent ]
90+
})
91+
export class AppModule {}
92+
```
93+
94+
### 6. Setup individual @NgModules
95+
96+
After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
97+
- AngularFirestoreModule
98+
- AngularFireAuthModule
99+
- AngularFireDatabaseModule
100+
- AngularFireStorageModule
101+
- AngularFireMessagingModule (Future release)
102+
103+
#### Adding the Firebase Database and Auth Modules
104+
105+
For example if your application was using both Firebase authentication and the Firebase database you would add:
106+
107+
```ts
108+
import { BrowserModule } from '@angular/platform-browser';
109+
import { NgModule } from '@angular/core';
110+
import { AppComponent } from './app.component';
111+
import { AngularFireModule } from 'angularfire2';
112+
import { AngularFirestoreModule } from 'angularfire2/firestore';
113+
import { AngularFireStorageModule } from 'angularfire2/storage';
114+
import { AngularFireAuthModule } from 'angularfire2/auth';
115+
import { environment } from '../environments/environment';
116+
117+
@NgModule({
118+
imports: [
119+
BrowserModule,
120+
AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything
121+
AngularFirestoreModule, // imports firebase/firestore, only needed for database features
122+
AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
123+
AngularFireStorageModule // imports firebase/storage only needed for storage features
124+
],
125+
declarations: [ AppComponent ],
126+
bootstrap: [ AppComponent ]
127+
})
128+
export class AppModule {}
129+
```
130+
131+
### 7. Inject AngularFirestore
132+
133+
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):
134+
135+
```ts
136+
import { Component } from '@angular/core';
137+
import { AngularFirestore } from 'angularfire2/firestore';
138+
139+
@Component({
140+
selector: 'app-root',
141+
templateUrl: 'app.component.html',
142+
styleUrls: ['app.component.css']
143+
})
144+
export class AppComponent {
145+
constructor(db: AngularFirestore) {
146+
147+
}
148+
}
149+
```
150+
151+
### 8. Bind to a list
152+
153+
In `/src/app/app.component.ts`:
154+
155+
```ts
156+
import { Component } from '@angular/core';
157+
import { AngularFirestore } from 'angularfire2/firestore';
158+
import { Observable } from 'rxjs';
159+
160+
@Component({
161+
selector: 'app-root',
162+
templateUrl: 'app.component.html',
163+
styleUrls: ['app.component.css']
164+
})
165+
export class AppComponent {
166+
items: Observable<any[]>;
167+
constructor(db: AngularFirestore) {
168+
this.items = db.collection('items').valueChanges();
169+
}
170+
}
171+
```
172+
173+
Open `/src/app/app.component.html`:
174+
175+
```html
176+
<ul>
177+
<li class="text" *ngFor="let item of items | async">
178+
{{item.name}}
179+
</li>
180+
</ul>
181+
```
182+
183+
### 9. Run your app
184+
185+
```bash
186+
ng serve
187+
```
188+
189+
Run the serve command and go to `localhost:4200` in your browser.
190+
191+
And that's it! If it's totally *borked*, file an issue and let us know.
192+
193+
### [Next Step: Documents in AngularFirestore](firestore/documents.md)

Diff for: ‎docs/install-and-setup.md

+31-92
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
> Using Ionic and the Ionic CLI? Check out these [specific instructions](ionic/cli.md) for Ionic and their CLI.
44
5+
> 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.
6+
57
### 0. Prerequisites
68

79
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.
@@ -26,109 +28,48 @@ ng serve
2628
open http://localhost:4200
2729
```
2830

29-
You should see a message that says *App works!*
31+
You should see a message that says _App works!_
3032

31-
### 3. Install AngularFire and Firebase
33+
### 3. Add AngularFire
3234

3335
```bash
34-
npm install angularfire2 firebase --save
36+
ng add angularfire2
3537
```
3638

37-
Now that you have a new project setup, install AngularFire and Firebase from npm.
39+
This command will install `angularfire2` and `firebase` from npm, prepare configuration variables and import AngularFire module(s) into your App's NgModule.
40+
41+
#### Custom FirebaseApp Names
42+
43+
You can optionally provide a custom FirebaseApp name by providing the `--firebaseApp=my-app-name` flag.
44+
45+
#### Setup individual @NgModules
3846

39-
### 4. Add Firebase config to environments variable
47+
By providing the `--all` flag you can also add modules for the individual @NgModules that your application needs:
4048

41-
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**.
49+
- AngularFirestoreModule
50+
- AngularFireAuthModule
51+
- AngularFireDatabaseModule
52+
- AngularFireStorageModule
53+
54+
### 4. Edit Firebase config in environments variable
55+
56+
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**.
4257

4358
```ts
4459
export const environment = {
45-
production: false,
4660
firebase: {
4761
apiKey: '<your-key>',
4862
authDomain: '<your-project-authdomain>',
4963
databaseURL: '<your-database-URL>',
5064
projectId: '<your-project-id>',
5165
storageBucket: '<your-storage-bucket>',
52-
messagingSenderId: '<your-messaging-sender-id>'
53-
}
66+
messagingSenderId: '<your-messaging-sender-id>',
67+
},
68+
production: false,
5469
};
5570
```
5671

57-
### 5. Setup @NgModule for the AngularFireModule
58-
59-
Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your Firebase configuration.
60-
61-
```ts
62-
import { BrowserModule } from '@angular/platform-browser';
63-
import { NgModule } from '@angular/core';
64-
import { AppComponent } from './app.component';
65-
import { AngularFireModule } from 'angularfire2';
66-
import { environment } from '../environments/environment';
67-
68-
@NgModule({
69-
imports: [
70-
BrowserModule,
71-
AngularFireModule.initializeApp(environment.firebase)
72-
],
73-
declarations: [ AppComponent ],
74-
bootstrap: [ AppComponent ]
75-
})
76-
export class AppModule {}
77-
```
78-
79-
#### Custom FirebaseApp Names
80-
You can optionally provide a custom FirebaseApp name with `initializeApp`.
81-
82-
```ts
83-
@NgModule({
84-
imports: [
85-
BrowserModule,
86-
AngularFireModule.initializeApp(environment.firebase, 'my-app-name')
87-
],
88-
declarations: [ AppComponent ],
89-
bootstrap: [ AppComponent ]
90-
})
91-
export class AppModule {}
92-
```
93-
94-
### 6. Setup individual @NgModules
95-
96-
After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
97-
- AngularFirestoreModule
98-
- AngularFireAuthModule
99-
- AngularFireDatabaseModule
100-
- AngularFireStorageModule
101-
- AngularFireMessagingModule (Future release)
102-
103-
#### Adding the Firebase Database and Auth Modules
104-
105-
For example if your application was using both Firebase authentication and the Firebase database you would add:
106-
107-
```ts
108-
import { BrowserModule } from '@angular/platform-browser';
109-
import { NgModule } from '@angular/core';
110-
import { AppComponent } from './app.component';
111-
import { AngularFireModule } from 'angularfire2';
112-
import { AngularFirestoreModule } from 'angularfire2/firestore';
113-
import { AngularFireStorageModule } from 'angularfire2/storage';
114-
import { AngularFireAuthModule } from 'angularfire2/auth';
115-
import { environment } from '../environments/environment';
116-
117-
@NgModule({
118-
imports: [
119-
BrowserModule,
120-
AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything
121-
AngularFirestoreModule, // imports firebase/firestore, only needed for database features
122-
AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
123-
AngularFireStorageModule // imports firebase/storage only needed for storage features
124-
],
125-
declarations: [ AppComponent ],
126-
bootstrap: [ AppComponent ]
127-
})
128-
export class AppModule {}
129-
```
130-
131-
### 7. Inject AngularFirestore
72+
### 5. Inject AngularFirestore
13273

13374
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):
13475

@@ -139,16 +80,14 @@ import { AngularFirestore } from 'angularfire2/firestore';
13980
@Component({
14081
selector: 'app-root',
14182
templateUrl: 'app.component.html',
142-
styleUrls: ['app.component.css']
83+
styleUrls: ['app.component.css'],
14384
})
14485
export class AppComponent {
145-
constructor(db: AngularFirestore) {
146-
147-
}
86+
constructor(db: AngularFirestore) {}
14887
}
14988
```
15089

151-
### 8. Bind to a list
90+
### 6. Bind to a list
15291

15392
In `/src/app/app.component.ts`:
15493

@@ -160,7 +99,7 @@ import { Observable } from 'rxjs';
16099
@Component({
161100
selector: 'app-root',
162101
templateUrl: 'app.component.html',
163-
styleUrls: ['app.component.css']
102+
styleUrls: ['app.component.css'],
164103
})
165104
export class AppComponent {
166105
items: Observable<any[]>;
@@ -180,14 +119,14 @@ Open `/src/app/app.component.html`:
180119
</ul>
181120
```
182121

183-
### 9. Run your app
122+
### 7. Run your app
184123

185124
```bash
186125
ng serve
187126
```
188127

189128
Run the serve command and go to `localhost:4200` in your browser.
190129

191-
And that's it! If it's totally *borked*, file an issue and let us know.
130+
And that's it! If it's totally _borked_, file an issue and let us know.
192131

193132
### [Next Step: Documents in AngularFirestore](firestore/documents.md)

0 commit comments

Comments
 (0)