Ionic 2 RC.0 and Firebase (not angularFire)


#1

Hi Guys,

today i have migrated my app from the beta to ionic 2 RC.0.

It looks awesome so far but i use firebase and have a strange issue:

The Error says:

[16:52:39]  rollup: Export 'auth' is not defined by '/cms/athl3tics/.tmp/pages/auth/login/login.js'

[16:52:39]  rollup: Use of `eval` (in /cms/athl3tics/node_modules/firebase/auth.js) is strongly discouraged, as it poses security risks and may cause issues with minification. See https://github.com/rollup/rollup/wiki/Troubleshooting#avoiding-eval for more details

[16:52:39]  rollup: Use of `eval` (in /cms/athl3tics/node_modules/firebase/database.js) is strongly discouraged, as it poses security risks and may cause issues with minification. See https://github.com/rollup/rollup/wiki/Troubleshooting#avoiding-eval for more details

In my package Json i just used the newest version of firebase:
"firebase": "3.4.1",

And i Import firebase with:
import * as firebase from 'firebase';

But IntelliJ marked this line already as red, so something is wrong there but iam not sure what it is?

When i do “ionic serve” i get the message in my console:
Uncaught TypeError: Cannot read property 'navigator' of undefined

Does someone have a hot tip for me?


#2

I have same issue, too. Open for the solutions :frowning:


#3

Same issue. Having lot of issues migrating to ionic 2 rc :frowning:


#4

Same here. I also have:

src/app/app.component.ts(9,27): error TS2307: Cannot find module 'firebase'. 
[01:45:43]  rollup: Export 'initializeApp' is not defined by

#5

Also with the same problem.


#6

Please see this thread


#7

I have switched from:
import * as firebase from 'firebase';
to
import firebase from 'firebase';

which eliminated the error messages regarding ‘auth’, ‘eval’ etc.

However, I am still seeing the following error message:
Uncaught TypeError: Cannot read property 'navigator' of undefined

when attempting to initialize firebase under the constructor.

Was anyone able to overcome this error?


#8

Hi Guys,

In my case, I’ve found we can modify our rollup config to make it work:
(node_modules/@ionic/app-scripts/config/rollup.config.js)

var ngTemplate = require('../dist/plugins/ng-template').ngTemplate;
var nodeResolve = require('rollup-plugin-node-resolve');
var commonjs = require('rollup-plugin-commonjs');

// https://github.com/rollup/rollup/wiki/JavaScript-API

module.exports = {
  /**
   * entry: The bundle's starting point. This file will
   * be included, along with the minimum necessary code
   * from its dependencies
   */
  entry: './.tmp/app/main.dev.js',

  /**
   * sourceMap: If true, a separate sourcemap file will
   * be created.
   */
  sourceMap: true,

  /**
   * format: The format of the generated bundle
   */
  format: 'iife',

  /**
   * dest: the output filename for the bundle in the buildDir
   */
  dest: 'main.js',

  // Add this to avoid Eval errors
  useStrict: false,

  /**
   * plugins: Array of plugin objects, or a single plugin object.
   * See https://github.com/rollup/rollup/wiki/Plugins for more info.
   */
  plugins: [
    ngTemplate(),
    commonjs({
        include: [
        'node_modules/rxjs/**',
        'node_modules/angularfire2/**',
        'node_modules/moment/**',
        'node_modules/@ionic/storage/**'
        ],
        namedExports: {
        'node_modules/firebase/firebase.js': ['initializeApp', 'auth', 'database'],
        'node_modules/angularfire2/node_modules/firebase/firebase-browser.js': ['initializeApp', 'auth', 'database']
        }
    }),
    nodeResolve({
      module: true,
      jsnext: true,
      main: true,
      browser: true,
      extensions: ['.js']
    })
  ]

};

Give it a try…

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


#9

this seems like quite the hack, but I guess it is the best we got for now! Integrated basic login functionality… will try some other features, but I really think this, AngularFire2, is still beta and not ready for production code


#10

I have the same problem with navigator ,

but this works for me :

However if i switch import * as GeoFire from 'geofire'; to import * as GeoFire from 'geofire';
I still get the same error : error TS2307: Cannot find module 'geofire'.

Any ideas ?


#12

I have the same issue as well. Does that hack method work? or is that not a preferred way to doing things? :frowning:
Seems like that hack required declaration of each and every firebase func?
‘node_modules/firebase/firebase.js’: [‘initializeApp’, ‘auth’, ‘database’]


#13

using npm @types is the way to add typings in typescript 2. And using

C:\myapps\ionic2-tests\mmsapp>npm install @types/firebase --save-dev --save-exact
ionic-hello-world@ C:\myapps\ionic2-tests\mmsapp
`-- @types/firebase@2.4.30

installs firebase API 2.4.30 and not 3.0 so hence we are getting these errors.

looks like wait till firebase3 typings are released as npm @types is the only way? or there any way we can generate @types?


Is it possible to use firebase v3 in ionic 2
#14

As a temperory fix,
after installing npm @types,

I replaced the index.t.ds files inside @types/firebase with contents from this file below.

https://gist.githubusercontent.com/cdcarson/28399c50b02bf6c507fbf5b7b30daa31/raw/fa089d231ca4253d4715f8161efc6af74c972dfa/firebase-sdk-3-typings.d.ts


#15

See if my solution works. It works for me so far. I am able to intergrate firebase 3 (not angularFire) on browser and device with no issue so far.


#16

This seems to remove the errors but I still see ‘eval’ warnings. my above method doesnt work either.


#17

Hey guys check this out. http://alexmgrant.github.io/ionic/firebase/rc0/lodash/2016/10/06/ionic-rc0-&-firebase.html


#18

Hi alexmgrant, I have 404 error on your link


#19

Thank you, updated. …