mirror of
https://github.com/angular/angular-cli.git
synced 2025-05-18 03:23:57 +08:00
94 lines
2.7 KiB
Markdown
94 lines
2.7 KiB
Markdown
<!-- Links in /docs/documentation should NOT have `.md` at the end, because they end up in our wiki at release. -->
|
|
|
|
# Include AngularFire
|
|
|
|
[Firebase](https://firebase.google.com/) is a mobile and web application platform with tools and infrastructure designed
|
|
to help developers build high-quality apps. [AngularFire2](https://github.com/angular/angularfire2) is the official
|
|
Angular library to use Firebase in your apps.
|
|
|
|
#### Create new project
|
|
|
|
Create a new project and navigate into the project.
|
|
|
|
```bash
|
|
$ ng new my-app
|
|
$ cd my-app
|
|
```
|
|
|
|
#### Install dependencies
|
|
|
|
In the new project you need to install the required dependencies.
|
|
|
|
```bash
|
|
$ npm install --save angularfire2 firebase
|
|
```
|
|
|
|
#### Get Firebase configuration details
|
|
|
|
In order to connect AngularFire to Firebase you need to get the configuration details.
|
|
|
|
Firebase offers an easy way to get this, by showing a JavaScript object that you can copy and paste.
|
|
|
|
- Log in to the [Firebase](https://firebase.google.com) console.
|
|
- Create New Project or open an existing one.
|
|
- Click `Add Firebase to your web app`.
|
|
- From the modal window that pops up you copy the `config` object.
|
|
|
|
```javascript
|
|
var config = {
|
|
apiKey: "your-api-key",
|
|
authDomain: "your-auth-domain",
|
|
databaseURL: "your-database-url",
|
|
storageBucket: "your-storage-bucket",
|
|
messagingSenderId: "your-message-sender-id"
|
|
};
|
|
```
|
|
|
|
#### Configure the Environment
|
|
|
|
These configuration details need to be stored in our app, one way to do this using the `environment`. This allows you to
|
|
use different credentials in development and production.
|
|
|
|
Open `src/environments/environment.ts` and add a key `firebase` to the exported constant:
|
|
|
|
```typescript
|
|
export const environment = {
|
|
production: false,
|
|
firebase: {
|
|
apiKey: 'your-api-key',
|
|
authDomain: 'your-auth-domain',
|
|
databaseURL: 'your-database-url',
|
|
storageBucket: 'your-storage-bucket',
|
|
}
|
|
};
|
|
```
|
|
|
|
To define the keys for production you need to update `src/environments/environment.prod.ts`.
|
|
|
|
#### Import and load FirebaseModule
|
|
|
|
The final step is to import `AngularFireModule` and initialize it using the parameters from the `environment`.
|
|
|
|
Open `src/app/app.module.ts` and add the following lines on the top of the file, with the other imports:
|
|
|
|
```typescript
|
|
import { AngularFireModule } from 'angularfire2';
|
|
import { environment } from '../environments/environment';
|
|
```
|
|
|
|
To initialize AngularFire add the following line to the `imports` array inside the `NgModule`:
|
|
|
|
```typescript
|
|
@NgModule({
|
|
// declarations
|
|
imports: [
|
|
// BrowserModule, etc
|
|
AngularFireModule.initializeApp(environment.firebase),
|
|
]
|
|
// providers
|
|
// bootstrap
|
|
})
|
|
```
|
|
|
|
#### Congratulations, you can now use Firebase in your Angular app!
|