Skip to content

Commit 19b446e

Browse files
sulcosulco
committed
docs(): update setup instructions to include ng add case
1 parent a311be4 commit 19b446e

File tree

3 files changed

+222
-89
lines changed

3 files changed

+222
-89
lines changed

Diff for: ‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
## Install
3131

3232
```bash
33-
npm install firebase @angular/fire --save
33+
ng add @angular/fire
3434
```
3535

3636
## Example use:

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

+195
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
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 on the page that says *App works!*
30+
31+
### 3. Install AngularFire and Firebase
32+
33+
```bash
34+
npm install @angular/fire 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 '@angular/fire';
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+
81+
You can optionally provide a custom FirebaseApp name with `initializeApp`.
82+
83+
```ts
84+
@NgModule({
85+
imports: [
86+
BrowserModule,
87+
AngularFireModule.initializeApp(environment.firebase, 'my-app-name')
88+
],
89+
declarations: [ AppComponent ],
90+
bootstrap: [ AppComponent ]
91+
})
92+
export class AppModule {}
93+
```
94+
95+
### 6. Setup individual `@NgModules`
96+
97+
After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
98+
99+
- `AngularFirestoreModule`
100+
- `AngularFireAuthModule`
101+
- `AngularFireDatabaseModule`
102+
- `AngularFireStorageModule`
103+
- `AngularFireMessagingModule` (Future release)
104+
105+
#### Adding the Firebase Database and Auth Modules
106+
107+
For example if your application was using both Firebase authentication and the Firebase database you would add:
108+
109+
```ts
110+
import { BrowserModule } from '@angular/platform-browser';
111+
import { NgModule } from '@angular/core';
112+
import { AppComponent } from './app.component';
113+
import { AngularFireModule } from '@angular/fire';
114+
import { AngularFirestoreModule } from '@angular/fire/firestore';
115+
import { AngularFireStorageModule } from '@angular/fire/storage';
116+
import { AngularFireAuthModule } from '@angular/fire/auth';
117+
import { environment } from '../environments/environment';
118+
119+
@NgModule({
120+
imports: [
121+
BrowserModule,
122+
AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything
123+
AngularFirestoreModule, // imports firebase/firestore, only needed for database features
124+
AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
125+
AngularFireStorageModule // imports firebase/storage only needed for storage features
126+
],
127+
declarations: [ AppComponent ],
128+
bootstrap: [ AppComponent ]
129+
})
130+
export class AppModule {}
131+
```
132+
133+
### 7. Inject `AngularFirestore`
134+
135+
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):
136+
137+
```ts
138+
import { Component } from '@angular/core';
139+
import { AngularFirestore } from '@angular/fire/firestore';
140+
141+
@Component({
142+
selector: 'app-root',
143+
templateUrl: 'app.component.html',
144+
styleUrls: ['app.component.css']
145+
})
146+
export class AppComponent {
147+
constructor(db: AngularFirestore) {
148+
149+
}
150+
}
151+
```
152+
153+
### 8. Bind a Firestore collection to a list
154+
155+
In `/src/app/app.component.ts`:
156+
157+
```ts
158+
import { Component } from '@angular/core';
159+
import { AngularFirestore } from '@angular/fire/firestore';
160+
import { Observable } from 'rxjs';
161+
162+
@Component({
163+
selector: 'app-root',
164+
templateUrl: 'app.component.html',
165+
styleUrls: ['app.component.css']
166+
})
167+
export class AppComponent {
168+
items: Observable<any[]>;
169+
constructor(db: AngularFirestore) {
170+
this.items = db.collection('items').valueChanges();
171+
}
172+
}
173+
```
174+
175+
Open `/src/app/app.component.html`:
176+
177+
```html
178+
<ul>
179+
<li class="text" *ngFor="let item of items | async">
180+
{{item.name}}
181+
</li>
182+
</ul>
183+
```
184+
185+
### 9. Run your app
186+
187+
```bash
188+
ng serve
189+
```
190+
191+
Run the serve command and navigate to `localhost:4200` in your browser.
192+
193+
And that's it! If it's totally *borked*, file an issue and let us know.
194+
195+
### [Next Step: Documents in AngularFirestore](firestore/documents.md)

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

+26-88
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+
> 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.
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.
@@ -28,109 +30,47 @@ open http://localhost:4200
2830

2931
You should see a message on the page that says *App works!*
3032

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

3335
```bash
34-
npm install @angular/fire firebase --save
36+
ng add @angular/fire
3537
```
3638

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 '@angular/fire';
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-
```
39+
This command will install `@angular/fire` and `firebase` from npm, prepare configuration variables and import AngularFire module(s) into your App's NgModule.
7840

7941
#### Custom `FirebaseApp` names
8042

81-
You can optionally provide a custom FirebaseApp name with `initializeApp`.
43+
You can optionally provide a custom FirebaseApp name by providing the `--firebaseApp=my-app-name` flag.
8244

83-
```ts
84-
@NgModule({
85-
imports: [
86-
BrowserModule,
87-
AngularFireModule.initializeApp(environment.firebase, 'my-app-name')
88-
],
89-
declarations: [ AppComponent ],
90-
bootstrap: [ AppComponent ]
91-
})
92-
export class AppModule {}
93-
```
45+
#### Setup individual `@NgModules`
9446

95-
### 6. Setup individual `@NgModules`
96-
97-
After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
47+
By providing the `--all` flag you can also add modules for the individual @NgModules that your application needs:
9848

9949
- `AngularFirestoreModule`
10050
- `AngularFireAuthModule`
10151
- `AngularFireDatabaseModule`
10252
- `AngularFireStorageModule`
10353
- `AngularFireMessagingModule` (Future release)
10454

105-
#### Adding the Firebase Database and Auth Modules
55+
### 4. Edit Firebase configuration
10656

107-
For example if your application was using both Firebase authentication and the Firebase database you would add:
57+
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**.
10858

10959
```ts
110-
import { BrowserModule } from '@angular/platform-browser';
111-
import { NgModule } from '@angular/core';
112-
import { AppComponent } from './app.component';
113-
import { AngularFireModule } from '@angular/fire';
114-
import { AngularFirestoreModule } from '@angular/fire/firestore';
115-
import { AngularFireStorageModule } from '@angular/fire/storage';
116-
import { AngularFireAuthModule } from '@angular/fire/auth';
117-
import { environment } from '../environments/environment';
118-
119-
@NgModule({
120-
imports: [
121-
BrowserModule,
122-
AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything
123-
AngularFirestoreModule, // imports firebase/firestore, only needed for database features
124-
AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
125-
AngularFireStorageModule // imports firebase/storage only needed for storage features
126-
],
127-
declarations: [ AppComponent ],
128-
bootstrap: [ AppComponent ]
129-
})
130-
export class AppModule {}
60+
export const environment = {
61+
firebase: {
62+
apiKey: '<your-key>',
63+
authDomain: '<your-project-authdomain>',
64+
databaseURL: '<your-database-URL>',
65+
projectId: '<your-project-id>',
66+
storageBucket: '<your-storage-bucket>',
67+
messagingSenderId: '<your-messaging-sender-id>',
68+
},
69+
production: false
70+
};
13171
```
13272

133-
### 7. Inject `AngularFirestore`
73+
### 5. Inject `AngularFirestore`
13474

13575
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):
13676

@@ -144,13 +84,11 @@ import { AngularFirestore } from '@angular/fire/firestore';
14484
styleUrls: ['app.component.css']
14585
})
14686
export class AppComponent {
147-
constructor(db: AngularFirestore) {
148-
149-
}
87+
constructor(db: AngularFirestore) {}
15088
}
15189
```
15290

153-
### 8. Bind a Firestore collection to a list
91+
### 6. Bind a Firestore collection to a list
15492

15593
In `/src/app/app.component.ts`:
15694

@@ -182,14 +120,14 @@ Open `/src/app/app.component.html`:
182120
</ul>
183121
```
184122

185-
### 9. Run your app
123+
### 7. Run your app
186124

187125
```bash
188126
ng serve
189127
```
190128

191129
Run the serve command and navigate to `localhost:4200` in your browser.
192130

193-
And that's it! If it's totally *borked*, file an issue and let us know.
131+
And that's it! If it's totally _borked_, file an issue and let us know.
194132

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

0 commit comments

Comments
 (0)