Ionic 2 and Underscore.js

Ionic Framework ionic-v3
1

Hey all,

I just start with Ionic 2 and Angular 2, and I wanted to know how I can add the underscore.js ( http://underscorejs.org/ ) library to use it in my app ?

At the moment, I installed it using npm (in Ionic 1 I made it work with bower), doing
npm install underscore --save
I can see the dependency in package.json, but can’t make it work in the app…
I have the following error :
ORIGINAL EXCEPTION: ReferenceError: _ is not defined

How can I inject it ? (This question will be also useful for me for other extern libraries)
Thanks by advance

2

I’ve gotten things to work by installing the typings file for the module and then importing using
import * as _ from 'underscore/underscore'

edit
The path to underscore may be slightly different, I’m just guessing, but I’ve done it like this for firebase and lodash.

Also it should be noted that I’ve only done this using typescript, though from what I can tell ES6 should work.

3

How you end up doing it… I’m trying the same but I can’t get the path right. Thanks Stefan

4

I’m using lodash and the following works for me:
import * as _ from 'lodash';

5

That works in Visual Code Editor:

import * as _ from 'underscore';

But the TypeScript compiler throw an error:

✗ TypeScript error: D:/app/pages/foo/foo.ts(4,20): Error TS2307: Cannot find module 'underscore'.

What I done so far:

$ npm install underscore --save $ tsd install underscore --save

1 Like
6

A great blog post by Ionic’s own Mike Hartington should help you, it did for me!

1 Like
7

THANKS!!! I used the wrong TypeScript Definition manager -> tsd instead of typings

Now it works fine! Thanks again!

1 Like
8

I followed the exact steps mentioned in the Mike’ blog: http://mhartington.io/post/ionic2-external-libraries/. Still I am getting the this error “Error TS2307: Cannot find module ‘lodash’”.

Only difference in my case the typings folder looks like this:

image

Interestingly the import statement doesn’t show squiggly underline.

Here is the tsconfig.json

{
“compilerOptions”: {
“target”: “es5”,
“module”: “commonjs”,
“emitDecoratorMetadata”: true,
“experimentalDecorators”: true
},
“filesGlob”: [
“/*.ts",
"!node_modules//*”
],
“files”: [
“app/app.ts”,
“typings/main.d.ts”
],
“exclude”: [
“node_modules”,
“typings/main”,
“typings/main.d.ts”
],
“compileOnSave”: false,
“atom”: {
“rewriteTsconfig”: false
}
}

Any idea?

9

Having “typings/main.d.ts” in both “files” and “exclude” reminds me of the Steven Wright joke about putting the humidifier and dehumidifier in the same room and letting them fight it out.

10

Do you think that is the issue? I tried removing but still same error…

11

Same error here …

12

FWIW I just ran npm install underscore and included it in a directive, and it’s working. It was not working previously, had TS errors and such - on revisiting it works fine. No idea why!

package.json:

  "dependencies": {
    "@ionic/storage": "^1.0.3",
    "ionic-angular": "^2.0.0-rc.0",
    "ionic-native": "^2.0.3",
    "ionicons": "^3.0.0",
    "underscore": "^1.8.3"
  },

Page component:

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

import * as _ from 'underscore';

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

export class HomePage {
  constructor(platform: Platform, public navCtrl: NavController {
    this.foundDevices = [];
    console.log( _ );
    // underscore shows up fine here!
  }
...
13

You’re right, works totally fine :slight_smile:

The only issue I have is there is still a warning during the compile process:

src/pages/login/login.ts(7,20): error TS2307: Cannot find module ‘underscore’.

It’s also marked in Visual Studio Code. Do you know how to get rid of the warning? I kinda like a warning free compile process :smiley:

Also typescript support would be nice. Do you know how to get this as well?

14

Try importing modules like this:

import _ from ‘underscore’;

1 Like
15

Funnily enough, I got to the root of this and made a blog post: http://hack.limbicmedia.ca/using-lodash-and-underscorejs-with-ionic-2-rc0/

16

Hi, I have been burning a lot of time with the new rollup bundling which seems very buggy. I am stuck on underscore. I followed your steps but get

underscore.js does not export default

when I try and use underscore

which kind of reads like _ is not the default export. Any ideas ?

Example component

import { Component } from ‘@angular/core’;
import _ from ‘underscore’;
@Component({
selector: ‘testchart’,
templateUrl: ‘testchart.html’
})
export class Testchart {

options: HighchartsOptions;
constructor() {
debugger;
console.log( .uniq([1, 1, 2, 3, 5, 5, 6]) );
//console.log(.uniq([1, 1, 2, 3, 5, 5, 6]));

this.options = {
  chart: {
    type: 'pie'
  },
  series: [{
    name: 'Brands',
    data: [{
      name: 'Microsoft Internet Explorer',
      y: 100
    }]
  }]
}

}

}

And package.json

{
“name”: “ionic-hello-world”,
“author”: “Ionic Framework”,
“homepage”: “http://ionicframework.com/”,
“private”: true,
“scripts”: {
“build”: “ionic-app-scripts build”,
“watch”: “ionic-app-scripts watch”,
“serve:before”: “watch”,
“emulate:before”: “build”,
“deploy:before”: “build”,
“build:before”: “build”,
“run:before”: “build”
},
“dependencies”: {
"@ionic/storage": “1.1.2”,
"@types/underscore": “1.7.33”,
“angular2-highcharts”: “^0.3.4”,
“angular2-moment”: “^1.0.0-beta.3”,
“highcharts”: “^5.0.0”,
“ionic-angular”: “^2.0.0-rc.0”,
“ionic-native”: “^2.0.3”,
“ionicons”: “^3.0.0”,
“moment”: “^2.15.1”,
“underscore”: “^1.8.3”
},
“devDependencies”: {
"@ionic/app-scripts": “latest”,
“typescript”: “^2.0.3”
},
“description”: “MyApp: An Ionic project”,
“cordovaPlugins”: [
“cordova-plugin-device”,
“cordova-plugin-console”,
“cordova-plugin-whitelist”,
“cordova-plugin-splashscreen”,
“cordova-plugin-statusbar”,
“ionic-plugin-keyboard”
],
“config”: {
“ionic_rollup”: “./rollup.config.js”
},
“cordovaPlatforms”: []
}