Ionic2+Firebase app compile error: TypeScript error:Error TS2503: Cannot find namespace 'firebase'

Question

I am new to Ionic2 and using firebase for the first time. While trying a sample login app using the above two I got a compile error as

TypeScript error:

TypeScript error: /ionic/devdactic-firebase22/node_modules/angularfire2/database/database.d.ts(9,29): Error TS2503: Cannot find namespace 'firebase'. TypeScript error: /ionic/devdactic-firebase22/node_modules/angularfire2/database/database.d.ts(10,31): Error TS2503: Cannot find namespace 'firebase'. TypeScript error: /ionic/devdactic-firebase22/node_modules/angularfire2/providers/auth.d.ts(15,40): Error TS2503: Cannot find namespace 'firebase'. TypeScript error: /ionic/devdactic-firebase22/node_modules/angularfire2/providers/auth.d.ts(16,52): Error TS2503: Cannot find namespace 'firebase'. TypeScript error:/ionic/devdactic-firebase22/node_modules/angularfire2/providers/auth.d.ts(16,92): Error TS2503: Cannot find namespace 'firebase'.

I have tried with install guide for AngularFire : https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md .

Also tried to import firebase in my app.ts as

import * as firebase from 'firebase';

still couldn't find any solution. What could be the reason and how can I solve it?

I am using angularfire2@^2.0.0-beta.2 and firebase@^2.4.2.

app.ts

import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {LoginPage} from './pages/login/login';
import * as firebase from 'firebase';

import {FIREBASE_PROVIDERS,
  defaultFirebase,
  AngularFire,
  AuthMethods,
  AuthProviders,
  firebaseAuthConfig} from 'angularfire2';


@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  providers: [
        FIREBASE_PROVIDERS,
        // defaultFirebase('https://loginapp-a08a6.firebaseio.com/'),
        firebaseAuthConfig({
           provider: AuthProviders.Password,
           method: AuthMethods.Password
       })
    ]
})
export class MyApp {
  rootPage: any = LoginPage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
     var config = { 
       apiKey: "AIzaSyBU2Vqq7AjN4rlMWjyKBbXo2RVJXAR4TeM",
        authDomain: "loginapp-a08a6.firebaseapp.com",
        databaseURL: "https://loginapp-a08a6.firebaseio.com",
        storageBucket: "loginapp-a08a6.appspot.com",
      };
      firebase.initializeApp(config); 
  }
}

ionicBootstrap(MyApp);

login.ts:

import {Component} from '@angular/core';
import {NavController, AlertController, LoadingController} from 'ionic-angular';
import {FirebaseAuth} from 'angularfire2';
import {HomePage} from '../home/home';

@Component({
  templateUrl: 'build/pages/login/login.html',
})
export class LoginPage {
  // public loading: Loading;

  constructor(public nav: NavController,
   public auth: FirebaseAuth,
   private alertCtrl:AlertController,
   private loadingCtrl:LoadingController) {}

  public registerUser(credentials) {
    this.showLoading()
    this.auth.createUser(credentials).then((authData) => {
      let prompt = this.alertCtrl.create({
        title: 'Success',
        subTitle: 'Your new Account was created!',
        buttons: ['OK']
      });
      prompt.present();
    }).catch((error) => {
      this.showError(error);
    });
  }

  public login(credentials) {
    this.showLoading()

    this.auth.login(credentials).then((authData) => {
      this.nav.setRoot(HomePage);
    }).catch((error) => {
      this.showError(error);
    });
  }

  showLoading() {
    var loader = this.loadingCtrl.create({
      content: 'Please wait...',
      duration:3000
    });
   loader.present();
  }

  showError(text) {   
    let alert = this.alertCtrl.create({
      title: 'Fail',
      subTitle: text,
      buttons: ['OK']
    });
    alert.present();
  }
}

Answer 1

In tsconfig under compilerSettings, add the property "types" and specify "firebase" as a type:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "types": [
      "firebase"
    ]
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Answer 2

There are varying set of answers that work for this kind of problem. The one that worked for me was:

You reference the Firebase 3 typings file that is included in the angularfire2 node package directly in your typings.json. Run:

• typings install file:node_modules/angularfire2/firebase3.d.ts --save --global
  • This saves the reference into typings.json
  • NOTE: requires typings v.1+
• typings install

This will put the typings files in the typings/ directory.

For other solutions, check out this issue on GitHub https://github.com/angular/angularfire2/issues/234