AngularFire2: Cannot find namespace "firebase"

If you have a fresh angular 2.0 CLI project - this will work - i don't know your particular setup:

1. make sure that your tsconfig.json looks like this:

"compilerOptions": {

"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"  /// - here - types are pointing to this @types folder inside node_modules.
]

}

2. create a new folder inside @types called firebase.
3. create a new file inside firebase, name it index.d.ts
4. place the content form here inside index.d.ts
5. here are the official angularfire2 setup docs. The Troubleshooting section is not accurate - for an angular cli project. Make sure not to place any declarations or stuff inside tsconfig.json or typings.json as indicated there (as of now 28 sept 2016).

It looks like the recommended way to add typing's to an Angular 2.0 CLI project - is to add them inside node_modules/@types folder.. As you can see the jasmine typing's folder looks similar - and was automatically added there by the CLI scaffolding.

It seems that bug has already been reported and (hopefully) being worked on. Check it out here:

https://github.com/angular/angularfire2/issues/461

Some people had success modifying typings.json (removing dependcy to firebase) or installing the @next version of typescript. Personally i'm stuck with the same error currently.

I hope the bug gets fixed eventually (soon ;))

EDIT: Seems like the 'bug' was a combination of several dependencies that had to be just right. In the end I had a PATH variable set to point to an old tsc installation under Program Files. For some reason, that was used instead of the (preferred one) from the node package typescript.

try adding this line under your import

declare let firebase: any; // <== THERE IS AN ERROR IN THE .d.ts file

ie

import { AngularFireModule } from 'angularfire2';

declare let firebase: any; // <== THERE IS AN ERROR IN THE .d.ts file

you do this when you add vanilla js to typescript, its basically saying to typescript that ' firebase' variable exists even if you dont see it right now and it should hopefully remove the error, if it does let me know.

Solution:

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.

Reason:

Firebase had introduced some breaking changes that AngularFire2 had not coped up with yet. Until the AngularFire2 team work it out, this will be the solution.

Add a thumbs up emoji and direct anyone having the same trouble here! Would save a lot of their time!