Hack w/ Limbic Media

Interactive Electronica and IoT

Visit Limbic Media

hack.limbicmedia.ca was created by the developers and engineers at Limbic Media to share their knowledge and experiences with DIY and hacker community-at-large.

by Eric McNiece

Using Lodash and UnderscoreJS with Ionic 2 RC0

Or, "Straight out of Lodash"

This is a quick guide to getting Lodash or UnderscoreJS working in your Ionic 2 RC0 project.

Update: December 23, 2016

Ionic 2.0.0-rc4 has reverted to Webpack, so the steps below may be considered deprecated. A quick test shows that npm i lodash works fine for import _ from 'lodash'; and the typings may matter more for your own IDE.

Here we are - 2016 is drawing to a close, and I'm just sitting here struggling to include basic libraries in my apps. In case you missed it elsewhere, the office passed around two great articles: a rant about how crazy the Javascript community is, and a good counterpoint. Most times, including UnderscoreJS in a project is a trivial operation (npm i underscore) but in this particular case it took me nearly 4 hours to figure it out.

Ionic 2 recently announced the shiny new Release Candidate 0, which makes a lot of sense to upgrade to since it solidifies much of the Ionic API. It also makes some bold changes, in particular moving away from Webpack and over to Rollup. Gotta shake those trees, I guess.

Ionic 2 uses Angular 2 and Typescript, which makes for some tricky dependency injection. The TS build process also complains when it doesn't recognize certain modules, so we don't just have to install Lodash or Underscore - we also have to install the typings before we can inject.

Lodash and UnderscoreJS are both great object manipulation libraries, but they aren't used at the same time. Pick your weapon of choice and let's get started.

We're assuming that you are working within a fancy new Ionic 2 app - init that if you haven't already:

ionic start myNewApp tabs --v2  
cd myNewApp  
npm install -g typings  

And awaaaaaay we go!

Lodash

Install from terminal:

npm install lodash --save  
npm install @types/lodash --save

# Leaving off --ambient makes lodash a dependency
typings install lodash --save  

In the Angular 2 component:

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

import _ from 'lodash';

@Component({
  templateUrl: 'home.html',
  providers: []
})

export class HomePage {  
  constructor(platform: Platform) {
    console.log( _.sum([4, 2, 8, 6]) );
  }
}

UnderscoreJS

Install from terminal:

npm i underscore --save  
npm i @types/underscore --save

#Optional, but some people require this for VSCode
typings install dt~underscore --save --global  

In the Angular 2 component:

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

import _ from 'underscore';

@Component({
  templateUrl: 'home.html',
  providers: []
})

export class HomePage {  
  constructor(platform: Platform) {
    console.log( _.uniq([1, 1, 2, 3, 5, 5, 6]) );
  }
}

Followup

This was a tricky arrangement to get working as it involved reading through support articles for many different ecosystems and architectures. A common pattern is to import * as _ from 'underscore' which does not work in this case (not sure why). It would be great to figure out how to include specific functions as well, like import {sum} from 'lodash' or import {sum} from 'lodash/core', but this may not matter in the end as Rollup should tree-shake away unused code.

If you know how to include single functions from these libraries, leave a note below!

Need help with a similar project?

Innovative Digital Art

Limbic Media

Consulting Engineering

Limbic Consulting