Ionic 2.0.0-rc.0 support

[alejandrocao]

Yesterday Ionic 2.0.0-rc.0 was released. I'm trying to migrate my project to this version but I couldn't install angularfire2 in a new Ionic 2 project.

The steps I was following for previous version were:

Add to package.json

"angularfire2": "2.0.0-beta.2",
"firebase": "3.2.0",

Install Firebase:

npm install
npm install typings -g
typings install file:node_modules/angularfire2/firebase3.d.ts --save --global
typings install

Add to app.ts

import {FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2'; 

ionicBootstrap(MyApp, [FIREBASE_PROVIDERS, defaultFirebase({
  apiKey: "AIzaSyBHbvuOtBKYJKw-C5tqQYOV_xU22Pr8oMM",
  authDomain: "todolistpoc.firebaseapp.com",
  databaseURL: "https://todolistpoc.firebaseio.com",
  storageBucket: "",
})]);

app.ts doesn't exist in new Ionic 2 projects, and I couldn't find ionicBootstrap function in app.module.ts and app.component.ts

npm --version
3.10.5

typings --version
1.4.0

ng --version
angular-cli: 1.0.0-beta.16
node: 6.3.0
os: win32 x64

ionic --version
2.1.0

ionic info

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS:
Node Version: v6.3.0

[AwsmOli]

I'm trying the same, here is what i've got so far:

Import the AngularFireModule in app.module.ts:
import { AngularFireModule } from 'angularfire2';
and call initializeApp within the imports array of your NgModule:

@NgModule({
  ..
  imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp({ 
      apiKey: "...",
      authDomain: "....firebaseapp.com",
      databaseURL: "...firebaseio.com",
      storageBucket: "..."
    }),
  ],
  ...
})

After that for me the AOT Compilation failed, with the error:

/node_modules/angularfire2/node_modules/firebase/firebase-browser.js does not export initializeApp

EDIT: #565 (comment) seems to have a better solution to make AOT Compilation work! ill try it now.

so i just added initApp auth and database to the exports of firebase-browser.js

/**
 *  Firebase libraries for browser - npm package.
 *
 * Usage:
 *
 *   firebase = require('firebase');
 */
require('./firebase');
module.exports = firebase;
//Added to make AOT Copilation work:
module.exports.initializeApp = firebase.initializeApp; 
module.exports.auth = firebase.auth;
module.exports.database = firebase.database;

But now when i run the code i get "cant call navigation on undefied" errors :/

[captaincole]

@alejandrocao @AwsmOli It seems that the current workaround for this can be found with issue
#545

If you follow along with this issue, then you will be able to do an ionic serve, but will receive a console error of

firebase.js:10Uncaught TypeError: Cannot read property 'navigator' of undefined

The solution it seems is to remove strict mode in the rollup config #511

I think this should still be a open issue though, as it seems the #511 was close about 12 days ago because it originally started as a different issue.

Edit: The rollup config they are referencing in that issue is the one from #545 located at:

node_modules/@ionic/app-scripts/config/rollup.config.js

[miguelcostero]

Here is a solution posted by Juan Suarez on his blog which worked for me.

https://playcode.org/getting-started-with-ionic-2-rc0-firebase-3-angularfire-2/

[storatus]

Hey, It works for me but anyone found a solution how to get rid of the console error ?

'is strongly discouraged, as it poses security risks and may cause issues with minification'

Adding 'useStrict: false' Didnt solve the issue.

[nunoarruda]

Also notice that Ionic rc.0 now uses TypeScript version 2. In TypeScript v2 type definition files are installed via npm, the typings tool is no longer used.

I've tried npm install @types/firebase --save-dev but it installs type definition files for Firebase v2.4.30 not v3. My guess is that Firebase v3 type definition files might not be available via npm yet. Am I correct?

[barbsicle]

Hi guys. Not sure if this is under the same scope of the original issue (or if the problem belongs to Angular). In Ionic 2 Beta 11 I ran a FirebaseService extends AngularFire and bootstrapped it in app.ts:

@Injectable()
export class FirebaseService extends AngularFire {

  constructor(firebaseConfig: string, auth: AngularFireAuth, database: FirebaseDatabase) {
      super(firebaseConfig, auth, database);
  }

...

} 

Now that Ionic has updated to RC0 I am not able to successfully bootstrap this extended service, resulting in an error such as Uncaught Error: Can't resolve all parameters for DiscoverPage: (NavController, GlobalService, ?, Events). where the "?" is FirebaseService.

Any advice on how to resolve this? I am thinking that I am not properly defining some providers required for FirebaseService or AngularFire but my previous version bootstrap did not require any...

[miguelcostero]

@barbsicle are you using angularfire2 ?

[barbsicle]

@miguelcostero Of course. I also followed the blogpost you linked which worked fine for me except for some warning messages in the console.

[kleeb]

has anyone tried running ionic in production mode? for instance ionic build

I am getting:

ngc error: Error: Error at .../node_modules/angularfire2/interfaces.d.ts:9:23: Cannot find namespace 'firebase'.

In dev mode everything works like expected, so I guess it might be somehow connected with minification of evals.

[kleeb]

Ok, if anyone have problems with this error: ngc error: Error: Error at .../node_modules/angularfire2/interfaces.d.ts:9:23: Cannot find namespace 'firebase'.

the problem is with typings, node_modules/@types/firebase/index.d.ts contains 2.4 version, but we use firebase 3 version. Quick workaround fix is to replace this file with node_modules/angularfire2/firebase3.d.ts.

[barbsicle]

I have fixed my issue above by creating a new project (did not change any source code, don't know what went wrong). However, now I still cannot do an ionic build because ngc is throwing an error on the same class.

[21:56:25]  ngc: Error: Error at D:/Users/User/Desktop/project/.tmp/app/app.module.ngfactory.ts:587:140: Property 'string' does not exist on type 'typeof "D:/Users/User/Desktop/project/.tmp/providers/firebase.service"'.
  at check (D:\Users\User\Desktop\project\node_modules\@angular\tsc-wrapped\src\tsc.js:31:15)
  at Tsc.typeCheck (D:\Users\User\Desktop\project\node_modules\@angular\tsc-wrapped\src\tsc.js:86:9)
  at D:\Users\User\User\project\node_modules\@angular\tsc-wrapped\src\main.js:33:23
  at process._tickCallback (internal/process/next_tick.js:103:7)
  at Module.runMain (module.js:592:11)
  at run (bootstrap_node.js:394:7)
  at startup (bootstrap_node.js:149:9)
  at bootstrap_node.js:509:3

The string in question is firebaseConfig: string which I define in the constructor. Any comments on this? Maybe AngularFire was not meant to be extended?

[gigocabrera]

Here's an ionic2 RC0 sample app using AngularFire2. I hope this helps some of you!

• Repo
• Changes to get AngularFire2 working

Credit where it's due: This sample app is the result of what I found in Juan Suarez blog post and Jorge Vergara's article and a few StackOverflow incidents out there

[kleeb]

@gigocabrera your example will not work when you update your node packages
rollup.config.js will change

[gigocabrera]

@kleeb I agree. I just wanted to get it working first. Now I can find a different way to make the changes permanent.

[barbsicle]

@gigocabrera You can make a custom rollup.config.js and specify it in package.json. Here's the guide on how to do it.

Also, I am currently using the guide in this repo to implement angularfire2 in my project and it's working great.

[gigocabrera]

@barbsicle thank you so much 👍
My rollup.config.js is not getting overwritten when I update node packages. Now I have a fully operational AngularFire2 app

[kleeb]

There is a problem with iOS native: #581
Ionic Framework Version: 2.0.0-rc.1
Ionic App Lib Version: 2.1.1