angularfire: Cannot find namespace 'firebase'.

I tried every solution, nothing worked except this: First you should know that I have an Angular 2.0 CLI project. - > is the final release, no RC bullshit, - with webpack. Only 2 files are available for configuration now: tsconfig.json and typings.json - you _don’t touch any of them_. In tsconfig.json you shoud have this:

"typeRoots": [
      "../node_modules/@types" 
    ]

As you can see, the types are in @types folder form node_modules. What we need to do:

1. 👉 Create a firebase folder inside the @types folder.
2. 👉 Inside firebase folder create a file called: index.d.ts
3. 👉 Paste the content from this url inside the index file : https://gist.githubusercontent.com/cdcarson/28399c50b02bf6c507fbf5b7b30daa31/raw/fa089d231ca4253d4715f8161efc6af74c972dfa/firebase-sdk-3-typings.d.ts - many thanks to @joaogarin 😃 !!

I guess this is the standard way to add typings now… you can see that it’s the same for jasmine - which is added automatically by the CLI.

I can’t belive i lost half a day behind this. Works now 😃

I am using angularfire2 in an ionic 2 project and I was getting the same error.

Typings for firebase 3 seem not to be available yet so it doesn’t help to install the firebase typings from the global repository.

For me, it helped to include the typings from node_modules/angularfire2 into the typings/main.d.ts file:

/// <reference path="../node_modules/angularfire2/firebase3.d.ts" />

you only need to uninstall firebase and reinstall

npm uninstall firebase

npm install --save firebase@4.8.0

delete node modules and reinstall it

rm -rf node_module && npm i

I also just had this issue.

Upgrading firebase to version 4.8.0 fixed it, but 4.8.1 breaks it again, so if anyone is having problems, make sure you use 4.8.0, not 4.8.1

As temporary workaround you can use this type definitions: https://gist.githubusercontent.com/cdcarson/28399c50b02bf6c507fbf5b7b30daa31/raw/fa089d231ca4253d4715f8161efc6af74c972dfa/firebase-sdk-3-typings.d.ts

Add into ‘typings.json’ into globalDependencies this record: "firebase": "https://gist.githubusercontent.com/cdcarson/28399c50b02bf6c507fbf5b7b30daa31/raw/fa089d231ca4253d4715f8161efc6af74c972dfa/firebase-sdk-3-typings.d.ts" and then typings i

Here’s an alternative to fincefid’s and davideast’s solutions above because

the “files” property cannot be used in conjunction with the “exclude” property ¹

which might be problematic for some setups. This worked for me with an Ionic v2 project.

Instead of modifying tsconfig.json, you can reference the Firebase 3 typings file that is included in the angularfire2 node package directly in your typings.json. Run:

• typings install file:node_modules/angularfire2/firebase3.d.ts --save --global
  • this saves the reference into typings.json
  • NOTE: requires typings v.1+
• typings install
  • this puts the typings files in the typings/ directory.

This error is still present, none of the solution above worked for me.

Instead of using node_modules/angularfire2/firebase3.d.ts that came with angularfire2, I did typings install firebase to install the one from https://github.com/typed-typings/npm-firebase. That one worked for me and I was able to do import * as firebase from 'firebase';. I really don’t know why. They should be the same.

The solution is using the "files" array in the tsconfig.json file.

 "files": [
    "node_modules/angularfire2/firebase3.d.ts"
  ],

This is stated in the installation and setup section.

Last step of installation and setup

😃

import * as firebase from ‘firebase’; on top of node_modules\angularfire2\angularfire2.d.ts worked!

There is so much BS going on with this implementation, and none of the above suggestion worked for me loading alternative options…

This has worked as a simple workaround for me:

In the main app.module.ts for my app (right before I first use the AngualarFireModule), I import the Firebase typings without actually using them (it’s enough to cause the firebase namespace to be registered, apparently).

In other words:

import {AngularFireModule} from "angularfire2";
import * as firebase from 'firebase'; // This is just to make the compiler happy

I have following setup:

angular-cli: 1.0.0-beta.16 node: 6.6.0 os: win32 x64

typings@1.4.0 typescript@2.0.3

I created a new project: ng new project-name cd project-name

I changed following @angular-lines to use version 2.0.1 in package.json, because installation of firebase and angularfire2 ended with errors:

“@angular/common”: “2.0.1”, “@angular/compiler”: “2.0.1”, “@angular/core”: “2.0.1”, “@angular/platform-browser”: “2.0.1”,

npm install -> ok

npm install angularfire2 firebase --save -> ok

I did these changes to the project:

https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md#4-setup-ngmodule

ng serve -> Cannot find namespace ‘firebase’.

I did following change:

import * as firebase from ‘firebase’; on top of node_modules\angularfire2\angularfire2.d.ts

ng serve -> ok

I find that you can add "types": [ "jasmine", "firebase" ] to tsconfig.json

#https://github.com/firebase/firebase-js-sdk/issues/388

@almgwary Please try to add a firebase.d.ts reference on to typings.d.ts.

Here is a src/typings.d.ts file in your angular-cli project, just add the following line into that file should works.

/// <reference path="../node_modules/firebase/firebase.d.ts" />

I put ///<reference path="../node_modules/firebase/firebase.d.ts"/> at the top line of main.ts so it loads firebase before Angular.

There’s version 4.8.2. I’ve updated it and it seems to be fixed now.

If looking for auth-types, import @firebase/auth-types

import * as firebase from 'firebase'; import { User } from '@firebase/auth-types';

then you can use the firebase user just like this: public user: User;

@jasugh

Your solution worked for me. And I am on Windows 10

I created a new project:
ng new project-name
cd project-name

I changed following @angular-lines to use version 2.0.1 in package.json, because installation
of firebase and angularfire2 ended with errors:

"@angular/common": "2.0.1",
"@angular/compiler": "2.0.1",
"@angular/core": "2.0.1",
"@angular/platform-browser": "2.0.1",

npm install 
-> ok

npm install angularfire2 firebase --save
-> ok

ng serve
-> Cannot find namespace 'firebase'.

I did following change:

import * as firebase from 'firebase';
on top of node_modules\angularfire2\angularfire2.d.ts

ng serve 
-> ok

@jasugh Thanks. Your last line solved my issue. i’m on RC.5

import * as firebase from ‘firebase’; on top of node_modules\angularfire2\angularfire2.d.ts

I’m having problems too. I followed the steps by @harry008 , but I’m still getting errors about firebase.d.ts when I try ng serve:

ERROR in [default] /Users/jim/Git-Projects/Park-Boys-Bootcamp/4-Firebase-Rooms/project/node_modules/firebase/firebase.d.ts:391:2 
Duplicate identifier 'export='.

ERROR in [default] /Users/jim/Git-Projects/Park-Boys-Bootcamp/4-Firebase-Rooms/project/src/typings.d.ts:6:10 
';' expected.

ERROR in [default] /Users/jim/Git-Projects/Park-Boys-Bootcamp/4-Firebase-Rooms/project/src/typings/modules/firebase/index.d.ts:498:0 
Duplicate identifier 'export='.

import * as firebase from 'firebase ; should fix the problem

There is not a firebase3.d.ts inside of angularfire2 directory.

@paulimfavarato put import on polyfills.ts is not a right semantic solution. I think add a reference on to typings.d.ts will be more semantic correct.

Here is my src/typings.d.ts content of my angular-cli 1.0.0-beta.17 project.

// Typings reference file, see links for more information
// https://github.com/typings/typings
// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
/// <reference path="../node_modules/firebase/firebase.d.ts" />

declare var System: any;

I’ve updated my solution:

angular-cli: 1.0.0-beta.17 node: 6.6.0 os: win32 x64

npm install -g typescript@next
npm install -g typings
npm install -g angular-cli

ng new my_project
cd my_project
npm install angularfire2 firebase --save
//DO NOT INSTALL @types/firebase - it will generate conflicts on new version of typescript
put import 'firebase/firebase'; on polyfills.ts
//do the angularfire configuration in the ngModule.
//do any operation with it.
ng serve //no errors related.

Instead of declaring stuff or adding things to files not under your control try this:

In tsconfig.json add:

"files": [
      "../node_modules/firebase/firebase.d.ts"
    ] 

In typings.d.ts add: ///<reference path="../node_modules/firebase/firebase.d.ts" /

Don’t forget to remove the import statement from the fangularfire2.d.ts if you added it before.

Restart ng serve and you’re good to go.

I personally found adding the following code to src/typings.d.ts fixed everything without having to manually add any files

///<reference path="../node_modules/firebase/firebase.d.ts"/>

Solved my issue by following steps 👇

• Added 👉 /// <reference path="../node_modules/firebase/firebase.d.ts" /> to src/typings.d.ts
• Added "files": [ "../node_modules/firebase/firebase.d.ts" ] to and removed "types": ["firebase"] from src/tsconfig.json as it gives error of Could not find definitions for file 'firebase'. You can keep types array for other things.

I’ve spent my half day just for this 😫 😓
@davideast I hope you had enjoyed your [pre/post/mid][whatever] ☕ in that meantime 😃

after installing the typings via gist or docs I still get the error. The only fix for me was to change the change the “files” path in tsconfig.json from “…/node_modules/angularfire2/firebase3.d.ts” -> “firebase3.d.ts” and copy firebase3.d.ts into my src directory.

I’m not sure why since using “…/typings/globals/firebase/index.d.ts” fixed “Cannot find name ‘Firebase’” on FB2 version of exact same app.

This worked for me 👍

  "angularfire2": "5.0.0-rc.6",
 "firebase": "4.8.2",

Note: Don’t forget to delete node_modules folder and npm i.

Have a look at #https://github.com/firebase/firebase-js-sdk/issues/387 & #https://github.com/firebase/firebase-js-sdk/issues/388.

Now you need to use the new type reference as @myspivey mentioned in the 2nd issue. They had a refactoring on typings in 4.8.1.

But if you are just bothered to change any of your code, fixing your firebase dependency version to 4.8.0 will solve these errors for you.

If anyone is still wondering, just check the new documentation for npm firebase (https://www.npmjs.com/package/firebase), especially the way it is now imported:

import * as firebase from 'firebase';

Many old tutorials have not changed this paticular line and there is not much support available online for it too. Hope this helps a few.

@doggy8088 new angularfire have the src\declarations.d.ts, works the same.

Thanks all for help!

I’ve combined the solutions by @hansanker and @paulimfavarato. And that’s works fine for me:

// REMOVE this from tsconfig.json
"typeRoots": [
  "./node_modules/@types"
],
"types": [
  "firebase"
]

// ADD this to tsconfig.json:
"files": [
  "../node_modules/firebase/firebase.d.ts"
]

// then run a command if firebase's types was installed:
npm uninstall @types/firebase

this changes helped me

tsconfig.json

+  ,"files":["../node_modules/firebase/firebase.d.ts"]

typings.d.ts

+  ///<reference path="../node_modules/firebase/firebase.d.ts"/>

thanks all ! I’ve solved this by mixing some comments that i’ve found… adding this int tsconfig.json, (right after “typeRoots” node)

    "types": [
      "firebase"
    ]

and adding this line to the typings.d.ts: declare var require: any;

package.json versions:

"angularfire2": "^2.0.0-beta.5",
"firebase": "^3.4.1",

@sercanyuksel I rushed some little template to github. https://github.com/ArsProgramma/Ng2CliWithFirebase

npm install and typings install

After that it should work for you.

I just opened the node_modules/angularfire2/angularfire2.d.ts and added the import to firebase import * as firebase from ‘firebase’;

As for me, I followed what was suggested by @olostan and it worked for me