8

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'")

Improve this question
6
  • 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. Commented Feb 16, 2016 at 22:38
  • can you provide a plunker? plnkr.co Commented Feb 16, 2016 at 23:09
  • I can't right now, but this is a plunker of tour of heroes without any connection to firebase: plnkr.co/edit/rUOZ12VN26LYPw0SqbQD?p=preview Commented Feb 16, 2016 at 23:17
  • think this might help you, its the ng2 todo app connected with firebase made by a key member of the team i suppose https://github.com/davideast/ng2do demo: https://vivid-fire-4950.firebaseapp.com/ Commented Feb 16, 2016 at 23:24
  • check this as well https://github.com/r-park/todo-angular2-firebase Commented Feb 16, 2016 at 23:32

1 Answer 1

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That makes sense! I added it to the app folder and to the root folder and checked the angularfire.ts file and I was still getting the error. It makes total sense that this should fix it, but I think I'm still missing something.
I still can't seem to get the Angular 2 and Tour of Heroes to work. I've had the same trouble getting any of the Angular 2 and Firebase examples to work and I definitely think r-park's is the way to go for now. I think "use r-park's example" is probably the moral of the story for today, I think that will probably change a lot in the coming months, but I think that makes yours the right answer. Thank you!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.