Last updated: Oct 18, 2016

So Ionic rc0 is here. Wooop! RIP Webpack. Wait no Webpack? Nope, we’re using rollupjs now. This comes with a few problems, also known as changes. Let’s go over how we can get some third party libraries loaded up into our shiny new Ionic project.

Let’s make sure we’re up to date
npm install -g ionic cordova typescript

Requirements aka worked for me:
node -v = v6.4.0
npm -v = 3.10.7

TLDR: Here is a blank tabs starter project with everything discussed below: Ionic rc0 & Firebase
git clone git@github.com:alexmgrant/ionic_rc0_firebase.git
cd ionic_rc0_firebase
npm i
ionic serve

Installation (from scratch)

mkdir your_project_name
cd your_project_name
ionic start blank --v2

For this project we’re going to install lodash as well as Firebase
npm i lodash firebase --save

Typescript will want the static types for our newly added libraries
npm install @types/lodash --save

We’re going to use a rollup plugin called replace later
npm install --save-dev rollup-plugin-replace

Install your packages
npm i

Apparently @types ecosystem should come through for us “most of the time”, however in the case of Firebase they have not updated their static types to their latest api 3.0. No sweat.
Add Firebase types to /tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5"
  },
  "types": [
    "firebase"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Next we need to tell rollupjs to use our commonjs modules ie. Firebase & Lodash. So we don’t have to dig into ionic’s implementation we can use package.json to build our own custom rollupjs script.

Setup our /package.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build --rollup ./config/rollup.config.js", // now when build is called we replace Ionic's config with our own
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
  "config": { // here we use config to call our custom rollup.js 
    "ionic_rollup": "./config/rollup.config.js"
  },
  "dependencies": {
    "@ionic/storage": "^1.0.3",
    "@types/lodash": "^4.14.37",
    "firebase": "^3.4.1",
    "ionic-angular": "^2.0.0-rc.0",
    "ionic-native": "^2.0.3",
    "ionicons": "^3.0.0",
    "lodash": "^4.16.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "latest",
    "typescript": "^2.0.3"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "ionic_rc0_firebase: An Ionic project"
}

Let’s create our custom rollup.config.js. Create a /config directory
mkdir config

Inside of our new /config ceate a file named rollup.config.js and place the following setup into that file.

var nodeResolve = require('rollup-plugin-node-resolve');
var commonjs = require('rollup-plugin-commonjs');
var globals = require('rollup-plugin-node-globals');
var builtins = require('rollup-plugin-node-builtins');
var json = require('rollup-plugin-json');

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

var rollupConfig = {
  useStrict: false,
  /**
   * entry: The bundle's starting point. This file will
   * be included, along with the minimum necessary code
   * from its dependencies
   */
  entry: 'src/app/main.dev.ts',

  /**
   * 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',

  /**
   * plugins: Array of plugin objects, or a single plugin object.
   * See https://github.com/rollup/rollup/wiki/Plugins for more info.
   */
  plugins: [
    builtins(),
    commonjs({
      include: [
        'node_modules/**', // We're going to include all of node_modules here because there will be many commonjs module dependencies within your included packages.  
      ],
      namedExports: {
        'node_modules/firebase/firebase.js': ['initializeApp', 'auth', 'database']
      }
    }),
    nodeResolve({
      module: true,
      jsnext: true,
      main: true,
      browser: true,
      extensions: ['.js']
    }),
    globals(),
    json() 
  ]
};

if (process.env.IONIC_ENV == 'prod') {
  // production mode
  rollupConfig.entry = '/app/main.prod.ts';
  rollupConfig.sourceMap = false;
}

module.exports = rollupConfig;

Now let’s include Firebase into our project within /src/app/app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { HomePage } from '../pages/home/home';
import firebase from 'firebase'; // Firebase does not support named exports, but we can use the default syntax

const firebaseconfig = { // setup your Firebase config
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  storageBucket: ''
};

@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    firebase.initializeApp(firebaseconfig); // init Firebase

    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }
}

Start it up
ionic serve

So it works, but until Firebase updates this setup is not ideal. You’ll get a couple errors in the console. I’m currently working on a solution to these. They’re from Firebase’s use of eval which is only parsing json. $ rollup: Use of 'eval' (in /your_path/your_project_name/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

Fortunately you can ignore this. When the Firebase team updates I’m sure they will update their use of eval.

There you go, you now have Ionic rc0, Firebase & Lodash in your project. Any questions?