Firebase with RC0


#1

I need help with the new update of RC0, i’m needing to connect with Firebase

BEFORE:
ionicBootstrap(MyApp, [FIREBASE_PROVIDERS,
defaultFirebase({
apiKey: “xxxxxxxxxxxx”,
authDomain: “xxxxxxxxxxxx”,
databaseURL: “https://xxxxxxxxxxxx.com”,
storageBucket: “xxxxxxxxxxxx.com”,
})]);

AND NOW?

@NgModule({
declarations: [
MyApp,
LoginPage
],
imports: [
IonicModule.forRoot(MyApp, [FIREBASE_PROVIDERS,
defaultFirebase({
apiKey: “xxxxxxxxxxxx”,
authDomain: “xxxxxxxxxxxx”,
databaseURL: “https://xxxxxxxxxxxx.com”,
storageBucket: “xxxxxxxxxxxx.com”,
})])
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
LoginPage

],
providers: []
})

Thus it did not work… Help-me?


#2

You should use angularfire2, check this link:
https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';

// Must export the config
export const firebaseConfig = {
  apiKey: '<your-key>',
  authDomain: '<your-project-authdomain>',
  databaseURL: '<your-database-URL>',
  storageBucket: '<your-storage-bucket>'
};

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

#4

:cry:
did not work, I even adding the namespace … You could post an example with “ionic 2” current?


#5

Please, check this example:
https://playcode.org/getting-started-with-ionic-2-rc0-firebase-3-angularfire-2/

What do you think?


#6

WOOOW it works, Thank U!


#7

@wesleydev I don’t think you should use AngularFire for a production application at this point, It is beta… does not support storage and the APIs are still changing as we speak… Unless there is a compelling reason, I would stick with Firebase


#8

So, is it possible to work right now with Firebase instead of AngularFire with this hacky way?


#9

yes it can work with Firebase


#10

I’ve tried to use AngularFire2 with Ionic rc.0 but came across too many issues so I gave up on using AngularFire2 for now.

I’ve also tried to use just the Firebase 3 JS SDK with Ionic rc.0 but Ionic rc.0 uses TypeScript version 2 which now uses npm to install type definition files and it looks like currently there’s no type definition files for Firebase 3 available via npm.

So I’m stuck at the moment…


#11

I was able to use both AF2 and Firebase with beta 11 and there is a way to do the same with rc0. I’m still converting my app so haven’t done it myself yet but someone was able to do it in ionic slack.


#12

Same here. I tried almost all posibilities but no chance.


#13

you can load the typescript files from the fiebase node package… it is a hack, but it will work. Also you don’t necessarily need the definitions for the application to work

See starter project here… http://bit.ly/2cJ0n0Y


#14

Hi Aaron,

If you could provide instructions on how to properly load the type definition files for Firebase 3 on a Ionic rc.0 project that would be lovely and people would be grateful. I’ve tried all I could think of but I always get console errors.

Thanks!


#15

https://github.com/aaronksaunders/ionic2rc0-firebase @nunoarruda @BananaJoe


#16

Hi all, so this is what I got working from playing around it. I did not use AngularFire 2.

  1. Start a new project
    ionic start myapp blank --v2

  2. Install firebase as normal. The new TypeScript def is actually already included.
    npm install firebase --save

  3. Then under node_modules@ionic\app-scripts\config\rollup.config.js, add the following as many has suggested.
    useStrict: false,

  4. Then import firebase as I normally use do, but instead use: import firebase from 'firebase';

Then just set it up as normal with your firebase config and it works fine. I tried in both devices and web browser. There is a lot of ‘eval’ warning, but I think they can be ignored since its a function that firebase library use and rollup does not like it? :sweat_smile: (any comments from experts?)

I am no expert but I THINK the reason for all the headache was due to rollup’s strict mode. I found this thread that detailed the error
Uncaught TypeError: Cannot read property 'navigator' of undefined
http://stackoverflow.com/questions/31221357/webpack-firebase-disable-parsing-of-firebase

This seems to work for me and doesn’t required a lot of modification. Please add any details I might have missed but this worked for me so far.

Hope this help someone!
Cheers~


Ionic 2 RC.0 and Firebase (not angularFire)
#17

After injecting AngularFire in the constructor I get several “Network Error” messages. I’m testing on a iOS 10 simulator. The same happens when I use just Firebase.


#18

I believe this thread is about Firebase not AngularFire2… you are mixing the two and the approach for getting them to work are completely different


#19

how did you install the type definitions?


#20

Did you tried Firebase SDK with a blank project? Does that work on its own? I haven’t fully ported my entire project yet, but doing it bit by bit from the blank project. See if that helps.


#21

The type definition seems to be already included as part of the package when I run the
npm install firebase --save

If I navigate to node_modules\firebase. There is a file there already firebase.d.ts. I matched it with AngularFire 2 and it is the same one. And typescript/ionic loads it automatically it seems. I do not need to do any typing install command.

This seems to hold true for other third party lib too. I first noticed this when I tried to install moment library, it works out of the box without any typing install and found that there is also a type defintion there. So I think as long as the type defintion is in the node module, it will work automatically. (Again, I am no expert in this matter, if some matter expert can verify my findings that would be great :sweat_smile:)

The only difference between firebase library and moment library that I can tell is that firebase uses eval() (which rollup does not like) and fail on strict mode (which rollup is at). So I just disable strict mode, and I ignore eval warning as I feel firebase team knows what they are doing with eval() and won’t pose any security risk as rollup warning suggest. :smile:

Cheers!