24

I am trying to develop a web app with angular2 and firebase 3.0 authentication following the guidelines given by google. However all the guides for web have javascript examples.

I added below lines in my index.html

<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
var config = {
   apiKey: "AIzaSyCSfBMvAdEDpcm-z6gWp2XXXXXXXXXXXXX",
   authDomain: "fototrans-calculator.firebaseapp.com",
   databaseURL: "https://fototrans-calculator.firebaseio.com",
   storageBucket: "fototrans-calculator.appspot.com",
};
firebase.initializeApp(config);

But when i try to use

rootRef = firebase.database.ref();

I get an error on 'firebase' saying

[ts] Cannot find name 'firebase'.

Now I remember that I had installed firebase using typings for the previous version of Firebase. Do we have any such thing again for the new version of Firebase? Please guide.

Thanks in advance

0

5 Answers 5

11

As of Firebase 3.2.1, the typings are included as part of the official NPM package:

https://firebase.google.com/support/release-notes/js#wzxhzdk4version_321_-_july_26_2016wzxhzdk5

3
  • 3
    I'm seeing tons of TypeScript compile errors when including these typings via typings install --global --save file:... and then compiling my project.
    – ktusznio
    Aug 4, 2016 at 21:32
  • Does someone know of some working example code using these typings? Aug 16, 2016 at 21:45
  • 2
    @ktusznio seems like the built-in typings only work with Typescript 2
    – urish
    Aug 16, 2016 at 23:29
4

You can work around this by doing declare var firebase: any;

4
  • 2
    it works, but it does not benefit from Typescript typing any more
    – LiangWang
    Jun 22, 2016 at 4:00
  • 1
    @Jacky I know :( The new version of AngularFire2 has manual Firebase 3 typings but I haven't figured out how to get them working: github.com/angular/angularfire2/blob/master/manual_typings/…
    – Alex Weber
    Jun 22, 2016 at 14:22
  • @Alex. Yeah, I'm having the same problems. I'm trying to use firebase3 along with angularfire2 under the Angular CLI setup. While angularfire2 typings work well, I can't get the firebase3 ones to get recognized. Feel like I've tried all possible combinations. Jul 12, 2016 at 18:16
  • @VitaliKniazeu I've decided to back up a bit and wait for it to mature a little, there's a been a lot of talk in the issue queue and I'm confident it'll be worked out soon!
    – Alex Weber
    Jul 19, 2016 at 0:20
4

There is a type definition file available at https://github.com/suhdev/firebase-3-typescript

I have submitted a pull request that will hopefully solve the issue you are describing.

2
  • 1
    In your tsconfig.json file include the following line in your "files" array: "files": [ "node_modules/angularfire2/firebase3.d.ts" ] This is a temporary step until the Firebase typings are published to npm.
    – Eusthace
    Jun 23, 2016 at 1:46
  • FWIW, those typings blow up on tslint. Jul 12, 2016 at 18:19
2

You can use the Typings definition file provided in the AngularFire2 GitHub repository (located here):

Include the following in your typings.json file:

{
  "ambientDependencies": {
    "firebase": "github:angular/angularfire2/manual_typings/firebase3/firebase3.d.ts#2c9ab3117eeb804e8e4996461eddcf32efa54a56"
  }
}

Note that the value here is simply the path to the file on GitHub followed by the relevant commit hash. The hash in the example is master at time of writing so you may wish to update to the latest commit.

Next you can run node_modules/.bin/typings install and Typings will apply the latest changes from your typings.json file.

0

You can try to use it this one: https://github.com/angular/angularfire2/tree/master/manual_typings/firebase3

And to get it to work you need to add it to your tsconfig.json:

"filesGlob": [
"**/*.ts",
"!node_modules/**/*",
"firebase3.d.ts"
],

And copy the file to the same folder as your tsconfig.json.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.