Cannot find namespace 'firebase'

Ionic Framework ionic-v3
1

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 { }
2

have you declared in index.html

try it

3

Thank for the reply.

I don’t have it declared in index.html.

What do I need to add?

4 
<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>

 
<script>
  // Initialize Firebase
  var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    storageBucket: "",
    messagingSenderId: ""
  };
  firebase.initializeApp(config);
</script>
1 Like
5

Unfortunately I still get the same error

6

apart from index.html declare it in app.component.ts

export class MyApp {
  rootPage = WeddingPlanPage;

  constructor(platform: Platform,public alrtCtl:AlertController) {
     firebase.initializeApp({
  apiKey: "",
    authDomain: "baseapp.com",
    databaseURL: "",
    storageBucket: "",
    messagingSenderId: ""
 
});
     platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
   
 
    
    });
7

I do already have the Firebase settings in app.module.ts (see defaultFirebase updated above), does it need to also be in app.component.ts?

8

If I try add this to app.component.ts, I get:

[ts] Cannot find name 'firebase'. any

9

import firebase from ‘firebase’

1 Like
10

Thank you!!!

That 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: ""
    });
1 Like
11

:slight_smile: you are welcome
.