Adding Firebase to Angular 2 Tour of Heroes Tutorial

Question

I'm trying to connect firebase to the angular2 tour of heroes tutorial by John Papa and I can't figure out how to do it.

I've tried to follow and implement jeffbcross in his angular2 example here , but I can't quite get it to work. I'm trying to create a simple example of angular2 and firebase playing nice together, and it would be really cool if it included OAuth. Does anyone know how to hook this up or have a repo of this?

After trying to use jeffbcross's example, I got stuck here: github.com/LukeSchlangen/heroesOfFirebase I couldn't get all of the references and imports working. Specifically, import * as Firebase from 'firebase'; would keep showing that I have 'firebase' as undefined, which makes sense because I never exported it, but I don't know where to export it.

(In case it helps, I'm using Visual Studio Code and the exact error is "Cannot find module 'firebase'")

Answer 1

YET ANOTHER UPDATE: Folks should take a look at the new AngularFire project (https://github.com/angular/angularfire2 and https://angularfire2.com/api/) which is currently in beta. This module takes care of a lot of issues that everyone is facing.

Take a look at jeffbcross's typings.json file. That is where the compiler is getting the 'firebase' reference.

UPDATE: In the case of this repo, the original author has a script cited in the package.json named "install_typings" which can be invoked using:

npm run install_typings

This will install typings which will help is "the manager for Typescript definitions." You could also install typings the normal way:

npm install typings --global

To get the Firebase definitions installed I needed to run this command:

typings install firebase --ambient --save

The result should give you a new folder on the root of the project named "typings" with files and folders inside.

I hope this helps, given that I've had a difficult time getting any of the Angular 2 with Firebase examples working at all. The one I've had the best success with has been r-park's todo-angular2-firebase repo.

Good luck.