Angularfire: Ionic 2 & AngularFire 2

[layegning]

I am doing some experiments with Ionic 2 and Firebase. From what I understand whenever you use
npm install firebase angularfire2--save`
It should make some changes on the dependencies (packages.json). For my project, it is not the case. When I look at inside the nodes_modules folder, I can find angularfire 2 and firebase Although I followed the official documentation, I get plenty of errors.

[davideast]

@layegning There isn't enough information here for me to help you. This is a basic piece of functionality, so if it's not working it's likely something is wrong with your node installation which is outside the scope of AngularFire2.

However, if your file is named packages.json that may be your problem since it is package.json.

[layegning]

@davideast Thank you for your answer and I am a big fan also ! Let me start again then from the beginning with some code. After I installed the AngularFire2 package and the Firebase package (by adding the "--save" argument), this is how my package.json file look like :
{ "dependencies": { "@angular/common": "2.0.0-rc.4", "@angular/compiler": "2.0.0-rc.4", "@angular/core": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", "@angular/http": "2.0.0-rc.4", "@angular/forms": "0.2.0", "es6-shim": "0.35.1", "ionic-angular": "2.0.0-beta.11", "ionic-native": "1.3.10", "ionicons": "3.0.0", "reflect-metadata": "0.1.8", "rxjs": "5.0.0-beta.6", "zone.js": "0.6.12" }, "devDependencies": { "del": "2.2.0", "gulp": "3.9.1", "gulp-watch": "4.3.5", "ionic-gulp-browserify-typescript": "2.0.0", "ionic-gulp-fonts-copy": "^1.0.0", "ionic-gulp-html-copy": "^1.0.0", "ionic-gulp-sass-build": "^1.0.0", "ionic-gulp-scripts-copy": "^2.0.0", "ionic-gulp-tslint": "^1.0.0", "tslint-ionic-rules": "0.0.4", "run-sequence": "1.1.5" }, "name": "gourmapp-beta-v1", "description": "Gourmapp-Beta-V1: An Ionic project", "cordovaPlugins": [ "cordova-plugin-device", "cordova-plugin-console", "cordova-plugin-whitelist", "cordova-plugin-splashscreen", "cordova-plugin-statusbar", "ionic-plugin-keyboard" ], "cordovaPlatforms": [] }

After I watched some updated tutorial and read a couple of documentation, I installed Firebase and AngularFire2 on the Ionic 2 application by making some configuration on the ./app.ts file. The following code showed how I did it.

`import { Component } from '@angular/core';
import { ionicBootstrap, Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2';
import { HomePage } from './pages/home/home';

@Component({
template: '',
})
export class MyApp {
rootPage: any = HomePage;

constructor(platform: Platform) {
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();
});
}
}

ionicBootstrap(MyApp, [FIREBASE_PROVIDERS, defaultFirebase({
apiKey: "AIzaSyDdmKtQAsrYYwZq7Dw0b809ZOERlAXrxhQ",
authDomain: "firelab-9e225.firebaseapp.com",
databaseURL: "https://firelab-9e225.firebaseio.com",
storageBucket: "firelab-9e225.appspot.com",
})
]);
`
On the terminal I get some typescript errors such as TS2305 (Something related with the ModuleWithProviders or "cannot find namespace 'firebase' ").

This is basic setup I think, I didn't even touched the Auth or the database, what am I doing wrong. Is there an additional information that you may need.

[tuarrep]

@layegning Try adding "firebase": "github:angular/angularfire2/manual_typings/firebase3/firebase3.d.ts" in your typings.json file (at the root of your project) under globalDependencies section.
Then run typings install

Here an example of typings.json file :

{
  "dependencies": {},
  "devDependencies": {},
  "globalDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504",
    "firebase": "github:angular/angularfire2/manual_typings/firebase3/firebase3.d.ts"
  }
}

I you don't have typings installed run npm i -g typings

Cheers

[layegning]

@mafzst Thank you for answer, let me try this one, I will let you know if it worked ...

[fergalmoran]

@mafzst 's fix removes all the "cannot find namespace 'firebase' " type errors for me (thanks for that!!)

but I'm still left with this when I try to build? I'm using Angular RC.4

`
TypeScript error: /home/fergalm/dev/pluto/node_modules/angularfire2/angularfire2.d.ts(4,10): Error TS2305: Module '"/home/fergalm/dev/pluto/node_modules/@angular/core/index"' has no exported member 'ModuleWithProviders'.

TypeScript error: /home/fergalm/dev/pluto/node_modules/angularfire2/auth/auth.d.ts(11,20): Error TS1112: A class member cannot be declared optional.

TypeScript error: /home/fergalm/dev/pluto/node_modules/angularfire2/database/firebase_object_observable.d.ts(6,17): Error TS1112: A class member cannot be declared optional.
`

[stewones]

+1

@angular/core/index"' has no exported member 'ModuleWithProviders'.