Angularfire: facing issues like " Cannot find name 'Firebase" and more when tried npm start, using visual studio code

[aashirwadgupta]

While starting the server using npm start (in Visual Studio Command prompt) I am facing the following issues w.r.t angularfire2's files

[email protected] start C:\Users\AASHIRWAD\angular2\angular2_firebase
tsc && concurrently "npm run tsc:w" "npm run lite"

node_modules/angularfire2/database/database.d.ts(8,29): error TS2304: Cannot find name 'Firebase'.
node_modules/angularfire2/database/database.d.ts(9,31): error TS2304: Cannot find name 'Firebase'.
node_modules/angularfire2/providers/auth.d.ts(10,25): error TS2304: Cannot find name 'FirebaseCredentials'.
node_modules/angularfire2/providers/auth.d.ts(13,16): error TS2304: Cannot find name 'FirebaseAuthData'.
node_modules/angularfire2/providers/auth.d.ts(14,29): error TS2304: Cannot find name 'FirebaseCredentials'.
node_modules/angularfire2/providers/auth.d.ts(14,59): error TS2304: Cannot find name 'FirebaseAuthData'.
node_modules/angularfire2/providers/auth_backend.d.ts(4,44): error TS2304: Cannot find name 'FirebaseCredentials'.
node_modules/angularfire2/providers/auth_backend.d.ts(8,44): error TS2304: Cannot find name 'FirebaseAuthData'.
node_modules/angularfire2/providers/auth_backend.d.ts(9,25): error TS2304: Cannot find name 'FirebaseAuthData'.
node_modules/angularfire2/providers/auth_backend.d.ts(11,38): error TS2304: Cannot find name 'FirebaseCredentials'.
node_modules/angularfire2/providers/auth_backend.d.ts(11,68): error TS2304: Cannot find name 'FirebaseAuthData'.
node_modules/angularfire2/providers/auth_backend.d.ts(13,55): error TS2304: Cannot find name 'FirebaseAuthData'.
node_modules/angularfire2/providers/auth_backend.d.ts(53,39): error TS2304: Cannot find name 'FirebaseCredentials'.
node_modules/angularfire2/utils/firebase_list_factory.d.ts(2,27): error TS2307: Cannot find module 'firebase'.
node_modules/angularfire2/utils/firebase_list_factory.d.ts(6,85): error TS2304: Cannot find name 'FirebaseQuery'.
node_modules/angularfire2/utils/firebase_list_factory.d.ts(11,47): error TS2304: Cannot find name 'FirebaseDataSnapshot'.
node_modules/angularfire2/utils/firebase_list_observable.d.ts(5,50): error TS2304: Cannot find name 'Firebase'.
node_modules/angularfire2/utils/firebase_list_observable.d.ts(5,61): error TS2304: Cannot find name 'FirebaseDataSnapshot'.
node_modules/angularfire2/utils/firebase_list_observable.d.ts(13,11): error TS2304: Cannot find name 'Firebase'.
node_modules/angularfire2/utils/firebase_list_observable.d.ts(13,22): error TS2304: Cannot find name 'FirebaseQuery'.
node_modules/angularfire2/utils/firebase_list_observable.d.ts(14,23): error TS2304: Cannot find name 'Firebase'.
node_modules/angularfire2/utils/firebase_list_observable.d.ts(14,34): error TS2304: Cannot find name 'FirebaseQuery'.
node_modules/angularfire2/utils/firebase_list_observable.d.ts(16,21): error TS2304: Cannot find name 'FirebaseWithPromise'.
node_modules/angularfire2/utils/firebase_object_factory.d.ts(3,27): error TS2307: Cannot find module 'firebase'.
node_modules/angularfire2/utils/firebase_object_observable.d.ts(7,102): error TS2304: Cannot find name 'Firebase'.

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejsnode_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.1.0
npm ERR! npm v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: tsc && concurrently "npm run tsc:w" "npm run lite"
npm ERR! Exit status 2
npm ERR!

Here is my tsconfig.json

{

"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false

},

"exclude": [

"node_modules",
"typings/main",
"typings/browser",
"typings/main.d.ts"

]
}

Here is package.json

{

"name": "afirebase",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"

},

"license": "ISC",
"dependencies": {

"@angular/common":  "2.0.0-rc.1",
"@angular/compiler":  "2.0.0-rc.1",
"@angular/core":  "2.0.0-rc.1",
"@angular/http":  "2.0.0-rc.1",
"@angular/platform-browser":  "2.0.0-rc.1",
"@angular/platform-browser-dynamic":  "2.0.0-rc.1",
"@angular/router":  "2.0.0-rc.1",
"@angular/router-deprecated":  "2.0.0-rc.1",
"@angular/upgrade":  "2.0.0-rc.1",

"angularfire2": "^2.0.0-beta.0",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.0",
"firebase": "^2.4.2",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.25",
"zone.js": "0.6.12",
"bootstrap": "^3.3.6"

},

"devDependencies": {

"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.9",
"typings": "^0.7.12"

}
}

I am using [email protected] and [email protected]

[davideast]

This is _usually_ a typings issue.

Did you try doing a typings install of Firebase❓

npm install typings -g # only if you don't have typings installed globally already
typings install --save --ambient firebase

[aashirwadgupta]

yes, I didn't do the second step. Thanks it started working now.

[rojagit]

is typings needed even for ionic2 ??

[Deimos620]

Hey guys , I am working with angularfire2 beta1 and it keeps getting this error. "typings install firebase" can not solve problem.
Would you like to tell me how to solve this?

[rojagit]

I gave up on this crap until they straighten things out...half-baked products that only the super-experienced can understand how to integrate, absolute lack of proper documentation and no support whatsoever. Disparity like this is what drives one to tightly-integrated MS products and make Gates richer.

[albertJ32]

I tried installing firebase as global (ambient is deprecated apparently) but got the following error:

Attempted to compile "firebase" as a global module, but it looks like an external module. You'll need to remove the global option to continue.

[sturdynut]

Hey @rojagit, @albertJ32 , @Deimos620:

Try this:

typings install dt~firebase --global --save

Next, make sure this is in your tsconfig.json:

"files": [
        "typings/index.d.ts"
    ]

From @r-park's comment on this thread https://github.com/angular/angularfire2/issues/182

[rojagit]

All that is very good, sturdynut, but like I said before, all the help we get with this triad is from forums, bloggers, and 'here try this, 'here try that'.

Nothing concrete as in documentation on how to integrate from the authors of these tools.

If they are not interested why would we be ? This is more like someone's playpen that something the industry could use, We dont have the time to dig into the code and come up with workarounds nor do we want others to.

[sturdynut]

@rojagit - No one here has an obligation to serve up perfect code or documentation nor an obligation to reach out and share solutions like I just did (you're welcome). This is an open source project. If there's something you don't like, update the documentation and submit a PR.

I apologize if that came off as blunt. I understand how hard it is to work when the library you want to use isn't working, just good to remember people doing OS aren't getting paid and often times are under appreciated.

[rojagit]

@sturdynut Sorry bud, didnt mean to sound rude, we of course appreciate what you guys in forums and blogs and OOS are doing, I was beseeching the developers/authors/evengelists of ionic/angular (& firebase) integration and all the other js tools being used to just come to terms on how to integrate one another if you wanted everyday developers to use them without having to dig thru piles and piles of code and loads and loads of trial error and incompatibilities.

There are blogs that exist that say hey use Ionic2 w Ang2 and FB3, no problem but its not even tested out.

[sturdynut]

@rojagit - No worries. I definitely understand. I've been trying to get NativeScript, Angular 2 and Firebase 3 to play nice. As soon as I get things going, another RC comes out and something, somewhere is inevitably broken. It is frustrating...best of luck with your project!

[rojagit]

Thanks, you too ! I have shelved it as a fall project for now, crossing my fingers :)

[albertJ32]

thanks @sturdynut updating my tsconfig.json did the trick! Although i still have "cannot find name 'firebase' " underlines in my component files they just dont show up when i run npm start now. To confirm is this startup script correct and do you have any other ideas why the underlines are there (my app is still working with firebase which is even weirder)?

"tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "

thanks

[albertJ32]

Also @sturdynut adding each .ts file the to tsconfig.ts file manually is brittle why do you think that stops the _2307_ error

[sturdynut]

@albertJ32 - You should only need to update your tsconfig.ts from main.d.ts to index.d.ts, which loads up global/module typings like the firebase typings. This was a change introduced with the typings library version 1.0.

Here's my index.d.ts for reference:

/// <reference path="globals/es6-promise/index.d.ts" />
/// <reference path="globals/firebase/index.d.ts" />

Not sure why you are getting the firebase warnings, but if it is working then the firebase global is there.

Did you try turning it off and then back on again? jk... :)

[dmastag]

Hi @rojagit
I am not affiliated with any of the products you mentioned, but I find your following comment a bit odd.

There are blogs that exist that say hey use Ionic2 w Ang2 and FB3, no problem but its not even tested out.

Considering that Ionic2, Angular2 and AngularFire2 are all still in Beta/Release Candidate, wouldn't that mean that this is indeed the stage where people who are enthusiastic about new technologies can try them out?

And this comment right here:

I gave up on this crap until they straighten things out...half-baked products that only the super-experienced can understand how to integrate, absolute lack of proper documentation and no support whatsoever. Disparity like this is what drives one to tightly-integrated MS products and make Gates richer.

I understand your frustration also, which I am also feeling (haven't successfully integrated this into angular-cli beta11-webpack8) but please try to be nicer to the people out here.

[albertJ32]

@sturdynut yeah i'm not sure either, i'm going to move straight onto ionic2 which was the goal of learning angular2. From what i've heard the ionic team haven't sorted out the integration with firebase yet anyway so maybe focus on the other stuff till the bugs are worked out and they stop putting out rc's every 5 seconds! thanks for the help though

[hiepxanh]

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

[nikvarma]

C:\movies>typings install --save --ambient firebase
typings ERR! deprecated The "ambient" flag is deprecated. Please use "global" instead

C:\movies>typings install --save --global firebase
typings ERR! message Attempted to compile "firebase" as a global module, but it looks like an external module. You'll need to remove the global option to continue.

typings ERR! cwd C:\movies
typings ERR! system Windows_NT 10.0.14393
typings ERR! command "C:\Program Files\nodejs\node.exe"
typings ERR! node -v v6.7.0
typings ERR! typings -v 1.4.0

typings ERR! If you need help, you may report this error at:
typings ERR! https://github.com/typings/typings/issues

C:\inetpub\wwwroot\movies>typings install --save firebase
[email protected]
`-- es6-promise

[FlavioMarquesInf]

$ npm install angularfire2 firebase --save
and works 😄

[nshiva]

Thanks @FlavioMarquesInf This worked.

[gayoba]

ERROR in C:/Users/jing/Desktop/CIT305/ContactList/node_modules/@firebase/auth-types/index.d.ts (18,39): Cannot find module '@firebase/util'.
ERROR in C:/Users/jing/Desktop/CIT305/ContactList/node_modules/@firebase/messaging-types/index.d.ts (18,39): Cannot find module '@firebase/util'.
ERROR in C:/Users/jing/Desktop/CIT305/ContactList/node_modules/@firebase/storage-types/index.d.ts (18,39): Cannot find module '@firebase/util'.

webpack: Failed to compile.

helpmeplease