Cannot find namespace 'firebase' - firebase

Question

I am using Ionic 2:
Your system information:
ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed
When I run ionic serve, I get the following error:
Typescript Error
Cannot find namespace 'firebase'.
...t/IDE/ionic-apps/theWhoZoo-chat/node_modules/angularfire2/database/database.d.ts
constructor(fbConfig: FirebaseAppConfig);
list(urlOrRef: string | firebase.database.Reference, opts?: FirebaseListFactoryOpts): FirebaseListObservable<any[]>;
object(urlOrRef: string | firebase.database.Reference, opts?: FirebaseObjectFactoryOpts): FirebaseObjectObservable<any>;
This is a new Ionic project created with ionic start ....
If anyone can suggest how I can resolve this, I would appreciate it.
I think it may be related to compatibles withing Ionic versions. The reason I say this, is because I am following this tutorial, and I guess he isn't using Ionic Framework Version: 2.0.0-rc.4. His example has an app.ts, where I split it into app.module.ts and app.component.ts as required by rc.4.
More info:
typings.json
{
"globalDependencies": {
"firebase3": "file:node_modules/angularfire2/firebase3.d.ts"
}
}
package.json
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "2.2.1",
"#angular/compiler": "2.2.1",
"#angular/compiler-cli": "2.2.1",
"#angular/core": "2.2.1",
"#angular/forms": "2.2.1",
"#angular/http": "2.2.1",
"#angular/platform-browser": "2.2.1",
"#angular/platform-browser-dynamic": "2.2.1",
"#angular/platform-server": "2.2.1",
"#ionic/storage": "1.1.7",
"angularfire2": "^2.0.0-beta.3-0930330",
"firebase": "^3.3.0",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "theWhoZoo-chat: An Ionic project"
}
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { FIREBASE_PROVIDERS, defaultFirebase, AngularFire, FirebaseAuth } from 'angularfire2';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler },
FIREBASE_PROVIDERS, defaultFirebase({
apiKey: "xxxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
storageBucket: "xxxx.appspot.com"
})]
})
export class AppModule { }

Answer 1

This seems to have resolved my issue.
Adding the following to app.component.ts:
import firebase from 'firebase'
...
firebase.initializeApp({
apiKey: "",
authDomain: "baseapp.com",
databaseURL: "",
storageBucket: "",
messagingSenderId: ""
});