Skip to content

Cannot find namespace 'firebase'. #234

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
doczoidberg opened this issue Jun 17, 2016 · 100 comments
Closed

Cannot find namespace 'firebase'. #234

doczoidberg opened this issue Jun 17, 2016 · 100 comments

Comments

@doczoidberg
Copy link

doczoidberg commented Jun 17, 2016

With the new angularfire I get the error

ERROR in C:\temp\aspnetu\node_modules\angularfire2\database\database.d.ts
(9,29): error TS2503: Cannot find namespace 'firebase'.
ERROR in C:\temp\aspnetu\node_modules\angularfire2\database\database.d.ts
(10,31): error TS2503: Cannot find namespace 'firebase'.
ERROR in C:\temp\aspnetu\node_modules\angularfire2\utils\firebase_object_factory.d.ts
(4,76): error TS2503: Cannot find namespace 'firebase'.
ERROR in C:\temp\aspnetu\node_modules\angularfire2\utils\firebase_list_factory.d.ts
(5,74): error TS2503: Cannot find namespace 'firebase'.
...etc
@LanderBeeuwsaert
Copy link

Can you tell me what the solution was for this?

@doczoidberg
Copy link
Author

doczoidberg commented Jun 17, 2016

no solution, but I think the issue has nothing to do with Angularfire2 but with my project template with AngularUniversal and HMR:
aspnet/JavaScriptServices#140

Update: Steve said, that it is a firebase issue. therefore I reopened the issue

@joaogarin
Copy link

joaogarin commented Jun 22, 2016

Anyone else got the solution for this? I am trying to get angularfire2 working with the 3 SDk.

I have ran

typings install --save --ambient firebase

But I still get this error. I am running this on webpack

@doczoidberg doczoidberg reopened this Jun 22, 2016
@joaogarin
Copy link

Using the definitely typed version for the typings did not help also. Still getting the same error.

@andyfo
Copy link

andyfo commented Jun 22, 2016

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" />

@joaogarin
Copy link

Yeah, I added it to the tsconfig file in files as mentioned in https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md#3-include-firebase-sdk-typings but I still get that error.

@joaogarin
Copy link

I noticed that after the inclusion of firebase3 my error is actually :

Cannot find name 'Firebase'.

And not 'namespace'. Will keep digging

@idesignpixels
Copy link

Hey also getting this problem :/

@olostan
Copy link

olostan commented Jun 22, 2016

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

@joaogarin
Copy link

In my case I need to get a hold of Firebase() so that I can use https://www.firebase.com/docs/web/api/firebase/authwithcustomtoken.html

authentication with custom tokens. I included the firebase typings but it seems Firebase global is somehow not exposed and typescript complains..

@joaogarin
Copy link

joaogarin commented Jun 22, 2016

Okay. Regarding the error : Cannot find name 'Firebase'.

Firebase global does not exist anymore, so I still had some parts from the 2 SDK where I was doing new Firebase() which now does not exist.so not an issue..

The namespace thing I managed to get across by adding the right typings as mentioned earlier. either by adding it to your tsconfig as described in https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md#3-include-firebase-sdk-typings or via typings (temporarily by the gist given by @olostan for example)

@easierbycode
Copy link

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.

@alexweber
Copy link

Hey all, I'm running into similar issues getting this installed in an Ionic2 project. The tsconfig file has some globbing rules that excludes node_modules/ stuff and I think that may be overriding the manual file entry for the firebase typings. Would be great to be able to simply install them from typings or something equivalent.

@joaogarin
Copy link

Yes if the tsconfig is excluding the node_modules then you want to add it to the typings.json file. In that case you can do what suggested by @olostan and do :

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

@alexweber
Copy link

@joaogarin Thanks!

@joaogarin
Copy link

No problem.

@starkiron
Copy link

I followed what was suggested by @olostan however, I am still receiving the error TS2304 cannot find name Firebase. any other suggestions or causes as to why this is persisting?

@starkiron
Copy link

tried install typings dt~firebase --global --save and it installed firebase 2.4 and the error in the editor was removed but when compiled, I still got the cannot find name Firebase error.

@idesignpixels
Copy link

Still causing me problems with ionic tried lots of things to work around.

@fincefid
Copy link

I solve this problem for my Ionic2 project by doing:

Step 1: package.json to contain the following versions

"dependencies": {
  "angularfire2": "^2.0.0-beta.2",
  "firebase": "^3.0.5",
  ...
},
"devDependencies": {
  "ionic-gulp-browserify-typescript": "^2.0.0", (Dunno what you can do for non-Ionic projects)
  ...

Step 2: install typings version 1.0.5 (that might be due to node version i have - v5.12.0)

Step 3: tsconfig.json to contain:

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

Step 4: typings/index.d.ts

/// <reference path="globals/es6-shim/index.d.ts" />
/// <reference path="../node_modules/angularfire2/firebase3.d.ts" />

@davideast
Copy link
Collaborator

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.

@filoxo
Copy link
Contributor

filoxo commented Jun 30, 2016

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 1

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.

@dmastag
Copy link
Contributor

dmastag commented Jul 1, 2016

@filoxo did not know you can install typings directly from the node_modules like that 👍

@crazyhalls
Copy link

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

@kehkashanF
Copy link

@vikvincer you need to install the missing promise-polyfill, which is not available by default in the newer releases. https://www.npmjs.com/package/promise-polyfill :)

@kehkashanF
Copy link

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.

@david95thinkcode
Copy link

Hi everyone,
I have the same issu and it's wasting my time. So please, did someone find the solution ?
I've tried everything but nothing, need help
To be sure you'll understand my problem, please look at the pictures :
is

I don't know if I'm right but I think the problem comes from here.
issu

PS : I'm working on an Ionic project

@kehkashanF
Copy link

kehkashanF commented Jul 7, 2017

@david95thinkcode Did you try 'firebase' instead of 'firebase/app'?

It seems the documentation was recently changed:

// This import loads the firebase namespace along with all its type information.
import * as firebase from 'firebase/app';
// These imports load individual services into the firebase namespace.
import 'firebase/auth';
import 'firebase/database';

I manged to solve the problem in my Ionic app using this import.

@vikvincer
Copy link

vikvincer commented Jul 7, 2017 via email

@david95thinkcode
Copy link

david95thinkcode commented Jul 7, 2017

@kehkashanF I've tried that this too but it didn't work.
Yeah, I saw the changes in the docs and tried the new specifications but it still not working :(

@david95thinkcode
Copy link

Issue fixed. I've reinstall firebase and everything work perfectly 👌

@Suka1215
Copy link

Just run yarn remove firebase --save
then clean cache and run yarn add firebase --save
It is losing ref to the namespace of firebase not an angularfire2 issue.

@famousTM
Copy link

famousTM commented Dec 20, 2017

ERROR in error TS6053: File '/node_modules/angularfire2/firebase3.d.ts' not found.

Ok the above error is a nightmare now.

/myPackageName/package.json

 "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "angularfire2": "^5.0.0-rc.5-next",
    "firebase": "4.8.0", 
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "uuid": "^3.1.0",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6.1",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

@alx-andru
Copy link
Contributor

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;

@paulimfavarato
Copy link

back to version "firebase": "4.8.0". remember to clear your cache. to check the version use npm list firebase

@dunlavy
Copy link

dunlavy commented Dec 20, 2017

This issue just wasted shit tons of our time. I'm sticking with the new Firebase but holy crap getting this working was needlessly shit.

@alx-andru Thanks for the good suggestion. Got me working, although sometimes I have to recompile. Yep, even with your suggestion, I still get this behavior in a very fresh project build with the Angular CLI:

ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-12-20T10:00:51.758Z
Hash: 11914b299a7274a699d9
Time: 3134ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.93 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial] [rendered]
chunk {scripts} scripts.bundle.js (scripts) 72.7 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 918 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 853 kB [initial] [rendered]

ERROR in node_modules/@firebase/database/dist/esm/src/api/Database.d.ts(4,33): error TS2307: Cannot find module '@firebase/app-types/private'.
node_modules/@firebase/database/dist/esm/src/core/AuthTokenProvider.d.ts(17,39): error TS2307: Cannot find module '@firebase/app-types/private'.
node_modules/angularfire2/auth/auth.d.ts(10,20): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/auth/auth.d.ts(11,36): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/database.d.ts(7,15): error TS2503: Cannot find namespace 'database'.
node_modules/angularfire2/database/interfaces.d.ts(3,50): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/interfaces.d.ts(3,80): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/interfaces.d.ts(12,20): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/interfaces.d.ts(42,40): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/interfaces.d.ts(43,41): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/interfaces.d.ts(44,37): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/list/audit-trail.d.ts(7,133): error TS2503: Cannot find namespace 'database'.
node_modules/angularfire2/database/list/state-changes.d.ts(6,135): error TS2503: Cannot find namespace 'database'.
node_modules/angularfire2/database/list/state-changes.d.ts(7,113): error TS2503: Cannot find namespace 'database'.
node_modules/angularfire2/firebase.app.module.d.ts(5,45): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/firebase.app.module.d.ts(8,17): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/firebase.app.module.d.ts(9,21): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/firebase.app.module.d.ts(10,22): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/firebase.app.module.d.ts(11,20): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/firebase.app.module.d.ts(13,22): error TS2503: Cannot find namespace 'firebase'.


webpack: Failed to compile.
webpack: Compiling...
 90% chunk assets processingERROR in node_modules/@firebase/database/dist/esm/src/api/Database.d.ts(4,33): error TS2307: Cannot find module '@firebase/app-types/private'.
node_modules/@firebase/database/dist/esm/src/core/AuthTokenProvider.d.ts(17,39): error TS2307: Cannot find module '@firebase/app-types/private'.
node_modules/angularfire2/auth/auth.d.ts(10,20): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/auth/auth.d.ts(11,36): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/database.d.ts(7,15): error TS2503: Cannot find namespace 'database'.
node_modules/angularfire2/database/interfaces.d.ts(3,50): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/interfaces.d.ts(3,80): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/interfaces.d.ts(12,20): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/interfaces.d.ts(42,40): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/interfaces.d.ts(43,41): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/interfaces.d.ts(44,37): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/database/list/audit-trail.d.ts(7,133): error TS2503: Cannot find namespace 'database'.
node_modules/angularfire2/database/list/state-changes.d.ts(6,135): error TS2503: Cannot find namespace 'database'.
node_modules/angularfire2/database/list/state-changes.d.ts(7,113): error TS2503: Cannot find namespace 'database'.
node_modules/angularfire2/firebase.app.module.d.ts(5,45): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/firebase.app.module.d.ts(8,17): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/firebase.app.module.d.ts(9,21): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/firebase.app.module.d.ts(10,22): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/firebase.app.module.d.ts(11,20): error TS2503: Cannot find namespace 'firebase'.
node_modules/angularfire2/firebase.app.module.d.ts(13,22): error TS2503: Cannot find namespace 'firebase'.
                                                                                                                                                                                                                                                                                     Date: 2017-12-20T10:00:59.912Z
Hash: e4bd8e4f1e7cf9d121a8
Time: 4196ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry]
chunk {main} main.bundle.js (main) 67 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 546 kB [initial] [rendered]
chunk {scripts} scripts.bundle.js (scripts) 72.7 kB [initial]
chunk {styles} styles.bundle.js (styles) 918 kB [initial]
chunk {vendor} vendor.bundle.js (vendor) 11.3 MB [initial] [rendered]

webpack: Compiled successfully.

Here's what I do to get my project working:

Run ng serve.
It fails.
Then I open a file.
Save small changes.
ng serve reattempts compilation.
It works. See above.

@blixenkrone
Copy link

blixenkrone commented Dec 20, 2017

I have the exact same output as @dunlavy.
Im pissed off, and willing to do anything by now... Tried everything in this thread.

EDIT: Apparently it works being pissed off - here's how i managed it (not sure if everything is necessary though):

  1. npm uninstall firebase
  2. npm install firebase
  3. import in main.ts: import * as firebase from 'firebase';
  4. rename imports in the firebase.service.ts to: import * as firebase from 'firebase';

@vzts
Copy link

vzts commented Dec 20, 2017

Have a look at #firebase/firebase-js-sdk#387 & #firebase/firebase-js-sdk#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.

@famousTM
Copy link

famousTM commented Dec 20, 2017

Thank you @paulimfavarato & @vzts that worked, using 4.8.0 works for me, with the above configuration from my last post. 💯
It will save a lot of headaches if you use "firebase": "4.8.0".

@Metsuryu
Copy link

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

@VictorAnquino
Copy link

you only need to uninstall firebase and reinstall

npm uninstall firebase

npm install --save [email protected]

delete node modules and reinstall it

rm -rf node_module && npm i

@vzts
Copy link

vzts commented Dec 23, 2017

#firebase/firebase-js-sdk#388

@dunlavy
Copy link

dunlavy commented Jan 3, 2018

Thank you all for your excellent contributions, BTW!

@androidovshchik
Copy link

androidovshchik commented Jan 7, 2018

For me forced installing npm install [email protected] helped
Which also suggested @VictorAnquino

@MrDrProfX
Copy link

VictorAnquino's solution worked for me. It sucks that we're tied to a specific version of firebase though... We really need a better solution.

@ashrafalngar4
Copy link

  1. Inside package.json, remove ^ from "firebase": "^4.8.1"
    1.1 Downgrade Firebase from 4.8.1 to 4.8.0 by changing 4.8.1 to 4.8.0
    1.2 End result should look like this: "firebase": "4.8.0"
  2. Run npm update in the Project Root. NPM will downgrade Firebase for ya
  3. Run ng serve --open to check for compilation errors. There shouldn't be any.

@irman
Copy link

irman commented Jan 13, 2018

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

@dunlavy
Copy link

dunlavy commented Jan 26, 2018

@irman Confirmed.

@chezdrz
Copy link

chezdrz commented Jan 28, 2018

@dunlavy @irman
Did you do any other fix other than the ones suggested ?
this error suddenly started cropping up for me and not able to resolve it.

I tried the following

npm uninstall firebase
npm cache clear --force
npm install [email protected]

Even tried
npm install firebase --latest

Nothing works
I tried 4.8.2 , even that does not work.

@Sampath-Lokuge
Copy link

Sampath-Lokuge commented Jan 29, 2018

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.

@dunlavy
Copy link

dunlavy commented Feb 8, 2018

@chezdrz Sorry for the late response. I took a vacation. ;-)

I used the troublesome work-around I posted above. May or may not work for you I suppose, but I was able to develop this way for awhile before I simply updated my project dependencies to 4.8.2. That cleared everything up for me perfectly. Be sure to update AngularFire and perhaps even Angular if you're not using the very latest release (and that doesn't break your project).

@JuniaYulia
Copy link

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

@TheAhmadSharif
Copy link

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.

It worked to me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests