Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 60 additions & 21 deletions docs/1-install-and-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@

**The setups below use the Webpack branch of the [Angular CLI](https://github.com/angular/angular-cli).**

**For the Broccoli/System.js branch [see this set up guide](broccoli-system-js-cli-setup.md)**

### 0. Prerequisites

You need the Angular CLI, typings, and TypeScript 2.0. TypeScript 2.0 is required for AngularFire2.
Expand All @@ -16,9 +14,20 @@ npm install -g angular-cli@webpack
npm install angular-cli@webpack --save-dev
# make sure you have typings installed
npm install -g typings
npm install -g [email protected]
npm install -g [email protected]
```

Verify you have the correct version installed by running `ng -v` and ensuring that you see `angular-cli: 1.x.x-beta.x-webpack.x`. If not, you may need to do the following:

```bash
# if you have the wrong cli version only
npm uninstall -g angular-cli

# reinstall clean version
npm install -g angular-cli@webpack
```


### 1. Create a new project

```bash
Expand All @@ -28,24 +37,32 @@ cd <project-name>

The Angular CLI's `new` command will set up the latest Angular build in a new project structure.

### 2. Install AngularFire 2 and Firebase
### 2. Test your Setup

```bash
ng serve
open http://localhost:4200
```

You should see a message that says *App works!*

### 3. Install AngularFire 2 and Firebase

```bash
npm install angularfire2 firebase --save
```

Now that you have a new project setup, install AngularFire 2 and Firebase from npm.

### 3. Setup @NgModule
### 4. Setup @NgModule

Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your Firebase configuration.
This can be found in your project at [the Firebase Console](https://console.firebase.google.com):

```ts
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode, NgModule } from '@angular/core';
import { AppComponent, environment } from './app/';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';

// Must export the config
Expand All @@ -68,19 +85,19 @@ export class MyAppModule {}

```

### 4. Inject AngularFire
### 5. Inject AngularFire

Open `/src/app/<my-app>.component.ts`, and make sure to modify/delete any tests to get the sample working (tests are still important, you know):
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 { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
moduleId: module.id,
selector: '<my-app>-app',
templateUrl: '<my-app>.component.html',
styleUrls: ['<my-app>.component.css']
selector: 'root-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class <MyApp>Component {
constructor(af: AngularFire) {
Expand All @@ -90,29 +107,29 @@ export class <MyApp>Component {

```

### 5. Bind to a list
### 6. Bind to a list

In `/src/app/<my-app>.component.ts`:
In `/src/app/app.component.ts`:

```ts
import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
moduleId: module.id,
selector: '<my-app>-app',
templateUrl: '<my-app>.component.html',
styleUrls: ['<my-app>.component.css']
selector: 'root-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class <MyApp>Component {
export class AppComponent {
items: FirebaseListObservable<any[]>;
constructor(af: AngularFire) {
this.items = af.database.list('items');
}
}
```

Open `/src/app/<my-app>.component.html`:
Open `/src/app/app.component.html`:

```html
<ul>
Expand All @@ -122,7 +139,7 @@ Open `/src/app/<my-app>.component.html`:
</ul>
```

### 6. Serve
### 6. Run your app

```bash
ng serve
Expand All @@ -133,3 +150,25 @@ Run the serve command and go to `localhost:4200` in your browser.
And that's it! If it totally borke, file an issue and let us know.

###[Next Step: Retrieving data as objects](2-retrieving-data-as-objects.md)

### Troubleshooting

#### Cannot find namespace 'firebase'.

If you run into this error while trying to invoke `ng serve`, open `src/tsconfig.json` and add the "types" array as follows:

```json
{
"compilerOptions": {
...
"typeRoots": [
"../node_modules/@types"
],

// ADD THIS
"types": [
"firebase"
]
}
}
```