Firebase with RC0

Ionic Framework ionic-v3
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?

2 Likes
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

1 Like
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

1 Like
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!

1 Like
15

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

3 Likes
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~

1 Like
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.

image
Screen Shot 2016-10-02 at 10.21.43.png1870×1284 208 KB

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!