Cannot find namespace 'firebase'

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'.
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:


  "globalDependencies": {
    "firebase3": "file:node_modules/angularfire2/firebase3.d.ts"


  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "",
  "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": [
  "cordovaPlatforms": [],
  "description": "theWhoZoo-chat: An Ionic project"


  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  "include": [
  "exclude": [
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false


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';

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler },
    FIREBASE_PROVIDERS, defaultFirebase({
      apiKey: "xxxx",
      authDomain: "",
      databaseURL: "",
      storageBucket: ""
export class AppModule { }

have you declared in index.html

try it

Thank for the reply.

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

What do I need to add?

<script src=""></script>

  // Initialize Firebase
  var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    storageBucket: "",
    messagingSenderId: ""
1 Like

Unfortunately I still get the same error

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

export class MyApp {
  rootPage = WeddingPlanPage;

  constructor(platform: Platform,public alrtCtl:AlertController) {
  apiKey: "",
    authDomain: "",
    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.

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?

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

[ts] Cannot find name 'firebase'. any

import firebase from β€˜firebase’

1 Like

Thank you!!!

That seems to have resolved my issue.

Adding the following to app.component.ts:

import firebase from 'firebase'
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    storageBucket: "",
    messagingSenderId: ""
1 Like

:slight_smile: you are welcome