1 | # AngularFire Quickstart
|
2 |
|
3 | ### 1. Create a new project
|
4 |
|
5 | ```bash
|
6 | npm install -g @angular/cli
|
7 | ng new <project-name>
|
8 | cd <project-name>
|
9 | ```
|
10 |
|
11 | The Angular CLI's `new` command will set up the latest Angular build in a new project structure.
|
12 |
|
13 | ### 2. Install AngularFire and Firebase
|
14 |
|
15 | ```bash
|
16 | ng add @angular/fire
|
17 | ```
|
18 |
|
19 | Now that you have a new project setup, install AngularFire and Firebase from npm.
|
20 |
|
21 | ### 3. Add Firebase config to environments variable
|
22 |
|
23 | 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). Click the Gear icon next to Project Overview, in the Your Apps section, create a new app and choose the type Web. Give the app a name and copy the config values provided.
|
24 |
|
25 | ```ts
|
26 | export const environment = {
|
27 | production: false,
|
28 | firebase: {
|
29 | apiKey: '<your-key>',
|
30 | authDomain: '<your-project-authdomain>',
|
31 | databaseURL: '<your-database-URL>',
|
32 | projectId: '<your-project-id>',
|
33 | storageBucket: '<your-storage-bucket>',
|
34 | messagingSenderId: '<your-messaging-sender-id>',
|
35 | appId: '<your-app-id>',
|
36 | measurementId: '<your-measurement-id>'
|
37 | }
|
38 | };
|
39 | ```
|
40 |
|
41 | ### 4. Setup `@NgModule` for the `AngularFireModule`
|
42 |
|
43 | Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your Firebase configuration.
|
44 |
|
45 | ```ts
|
46 | import { BrowserModule } from '@angular/platform-browser';
|
47 | import { NgModule } from '@angular/core';
|
48 | import { AppComponent } from './app.component';
|
49 | import { AngularFireModule } from '@angular/fire/compat';
|
50 | import { environment } from '../environments/environment';
|
51 |
|
52 | @NgModule({
|
53 | imports: [
|
54 | BrowserModule,
|
55 | AngularFireModule.initializeApp(environment.firebase)
|
56 | ],
|
57 | declarations: [ AppComponent ],
|
58 | bootstrap: [ AppComponent ]
|
59 | })
|
60 | export class AppModule {}
|
61 | ```
|
62 |
|
63 | ### 5. Setup individual `@NgModule`s
|
64 |
|
65 | After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
|
66 |
|
67 | For example if your application was using both Google Analytics and the Firestore you would add `AngularFireAnalyticsModule` and `AngularFirestoreModule`:
|
68 |
|
69 | ```ts
|
70 | import { BrowserModule } from '@angular/platform-browser';
|
71 | import { NgModule } from '@angular/core';
|
72 | import { AppComponent } from './app.component';
|
73 | import { AngularFireModule } from '@angular/fire/compat';
|
74 | import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics';
|
75 | import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
|
76 | import { environment } from '../environments/environment';
|
77 |
|
78 | @NgModule({
|
79 | imports: [
|
80 | BrowserModule,
|
81 | AngularFireModule.initializeApp(environment.firebase),
|
82 | AngularFireAnalyticsModule,
|
83 | AngularFirestoreModule
|
84 | ],
|
85 | declarations: [ AppComponent ],
|
86 | bootstrap: [ AppComponent ]
|
87 | })
|
88 | export class AppModule {}
|
89 | ```
|
90 |
|
91 | ### 7. Inject `AngularFirestore`
|
92 |
|
93 | 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):
|
94 |
|
95 | ```ts
|
96 | import { Component } from '@angular/core';
|
97 | import { AngularFirestore } from '@angular/fire/compat/firestore';
|
98 |
|
99 | @Component({
|
100 | selector: 'app-root',
|
101 | templateUrl: 'app.component.html',
|
102 | styleUrls: ['app.component.css']
|
103 | })
|
104 | export class AppComponent {
|
105 | constructor(firestore: AngularFirestore) {
|
106 |
|
107 | }
|
108 | }
|
109 | ```
|
110 |
|
111 | ### 8. Bind a Firestore collection to a list
|
112 |
|
113 | In `/src/app/app.component.ts`:
|
114 |
|
115 | ```ts
|
116 | import { Component } from '@angular/core';
|
117 | import { AngularFirestore } from '@angular/fire/compat/firestore';
|
118 | import { Observable } from 'rxjs';
|
119 |
|
120 | @Component({
|
121 | selector: 'app-root',
|
122 | templateUrl: 'app.component.html',
|
123 | styleUrls: ['app.component.css']
|
124 | })
|
125 | export class AppComponent {
|
126 | items: Observable<any[]>;
|
127 | constructor(firestore: AngularFirestore) {
|
128 | this.items = firestore.collection('items').valueChanges();
|
129 | }
|
130 | }
|
131 | ```
|
132 |
|
133 | Open `/src/app/app.component.html`:
|
134 |
|
135 | ```html
|
136 | <ul>
|
137 | <li class="text" *ngFor="let item of items | async">
|
138 | {{item.name}}
|
139 | </li>
|
140 | </ul>
|
141 | ```
|
142 |
|
143 | ### 9. Run your app locally
|
144 |
|
145 | ```bash
|
146 | ng serve
|
147 | ```
|
148 |
|
149 | Your Angular app will compile and serve locally, visit it we should see an empty list.
|
150 |
|
151 | In another tab [start adding data to an `items` collection in Firestore](https://firebase.google.com/docs/firestore/manage-data/add-data). *As we're not authenticating users yet, be sure to start Firestore in **test mode** or allow reading from the `items` collection in Security Rules (`allow read: if true`).*
|
152 |
|
153 | Once you've created a `items` collection and are inserting documents, you should see data streaming into your Angular application.
|
154 |
|
155 | ### 10. Deploy your app
|
156 |
|
157 | Finally, we can deploy the application to Firebase hosting:
|
158 |
|
159 | ```bash
|
160 | ng deploy
|
161 | ```
|