diff --git a/docs/1-install-and-setup.md b/docs/1-install-and-setup.md index 18aff2b21..187056ae3 100644 --- a/docs/1-install-and-setup.md +++ b/docs/1-install-and-setup.md @@ -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. @@ -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 typescript@2.0 +npm install -g typescript@2.0.2 +``` + +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 @@ -28,7 +37,16 @@ cd 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 @@ -36,16 +54,15 @@ 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 @@ -68,9 +85,9 @@ export class MyAppModule {} ``` -### 4. Inject AngularFire +### 5. Inject AngularFire -Open `/src/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'; @@ -78,9 +95,9 @@ import { AngularFire, FirebaseListObservable } from 'angularfire2'; @Component({ moduleId: module.id, - selector: '-app', - templateUrl: '.component.html', - styleUrls: ['.component.css'] + selector: 'root-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] }) export class Component { constructor(af: AngularFire) { @@ -90,9 +107,9 @@ export class Component { ``` -### 5. Bind to a list +### 6. Bind to a list -In `/src/app/.component.ts`: +In `/src/app/app.component.ts`: ```ts import { Component } from '@angular/core'; @@ -100,11 +117,11 @@ import { AngularFire, FirebaseListObservable } from 'angularfire2'; @Component({ moduleId: module.id, - selector: '-app', - templateUrl: '.component.html', - styleUrls: ['.component.css'] + selector: 'root-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] }) -export class Component { +export class AppComponent { items: FirebaseListObservable; constructor(af: AngularFire) { this.items = af.database.list('items'); @@ -112,7 +129,7 @@ export class Component { } ``` -Open `/src/app/.component.html`: +Open `/src/app/app.component.html`: ```html
    @@ -122,7 +139,7 @@ Open `/src/app/.component.html`:
``` -### 6. Serve +### 6. Run your app ```bash ng serve @@ -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" + ] + } +} +```