Finally works, without errors :D

Thank you all: angular/angularfire#461

README.md

@@ -0,0 +1,33 @@
+# angularfire2-instalation-webpack-fixed-errors
+Fixed: "Cannot find type definition file for 'firebase'"
+https://github.com/angular/angularfire2/issues/461
+
+This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.11-webpack.2.
+
+## Development server
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Deploying to Github Pages
+
+Run `ng github-pages:deploy` to deploy to Github Pages.
+
+## Further help
+
+To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

angular-cli.json

@@ -1,7 +1,7 @@
 {
   "project": {
     "version": "1.0.0-beta.11-webpack.2",
-    "name": "angularfire2-webpack-errors"
+    "name": "angularfire2-webpack-errors-solved"
   },
   "apps": [
     {

e2e/app.e2e-spec.ts

@@ -1,10 +1,10 @@
-import { Angularfire2WebpackErrorsPage } from './app.po';
+import { Angularfire2Webpackerrors-solvedPage } from './app.po';
 
-describe('angularfire2-webpack-errors App', function() {
-  let page: Angularfire2WebpackErrorsPage;
+describe('angularfire2-webpack-errors-solved App', function() {
+  let page: Angularfire2Webpackerrors-solvedPage;
 
   beforeEach(() => {
-    page = new Angularfire2WebpackErrorsPage();
+    page = new Angularfire2Webpackerrors-solvedPage();
   });
 
   it('should display message saying app works', () => {

e2e/app.po.ts

@@ -1,4 +1,4 @@
-export class Angularfire2WebpackErrorsPage {
+export class Angularfire2Webpackerrors-solvedPage {
   navigateTo() {
     return browser.get('/');
   }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "angularfire2-webpack-errors",
+  "name": "angularfire2-webpack-errors-solved",
   "version": "0.0.0",
   "license": "MIT",
   "angular-cli": {},
@@ -20,7 +20,9 @@
     "@angular/platform-browser": "2.0.0-rc.5",
     "@angular/platform-browser-dynamic": "2.0.0-rc.5",
     "@angular/router": "3.0.0-rc.1",
+    "angularfire2": "^2.0.0-beta.4",
     "core-js": "^2.4.0",
+    "firebase": "^3.3.0",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "ts-helpers": "^1.1.1",

src/app/app.component.html

@@ -1,3 +1,16 @@
-<h1>
-  {{title}}
-</h1>
+<section *ngIf="items">
+  <h1>Items receiven from database</h1>
+  <ul>
+    <li class="text" *ngFor="let item of items; let i = index">
+      {{i}}
+    </li>
+  </ul>
+</section>
+
+<h1 *ngIf="!items">Items not yet receiven from database</h1>
+
+<br>
+<hr>
+<footer>
+  Thanks: <a href="https://github.com/angular/angularfire2/issues/461">https://github.com/angular/angularfire2/issues/461</a>
+</footer>

src/app/app.component.spec.ts

@@ -3,7 +3,7 @@
 import { addProviders, async, inject } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
-describe('App: Angularfire2WebpackErrors', () => {
+describe('App: Angularfire2Webpackerrors-solved', () => {
   beforeEach(() => {
     addProviders([AppComponent]);
   });

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { AngularFire, FirebaseListObservable } from 'angularfire2';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,12 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app works!';
+  items = null;
+
+  constructor(af: AngularFire) {
+   af.database.list('/').subscribe( (itemParamenter) => {
+       // .subscribe() because asyncronous response
+       this.items = itemParamenter;
+   });
+  }
 }

src/app/app.module.ts

@@ -3,6 +3,16 @@ import { NgModule, ApplicationRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
+import {AngularFireModule} from 'angularfire2';
+import * as firebase from 'firebase';
+
+const firebaseConfig = {
+  apiKey: "AIzaSyB8muYl0n491yZ6vMdOMfV7pr2_MGphEMo",
+  authDomain: "timemanager-21.firebaseapp.com",
+  databaseURL: "https://timemanager-21.firebaseio.com",
+  storageBucket: "timemanager-21.appspot.com"
+}
+
 
 @NgModule({
   declarations: [
@@ -11,7 +21,8 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     CommonModule,
-    FormsModule
+    FormsModule,
+    AngularFireModule.initializeApp(firebaseConfig)
   ],
   providers: [],
   entryComponents: [AppComponent],

src/index.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>Angularfire2WebpackErrors</title>
+  <title>Angularfire2 Webpack errors-solved</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">