Ionic-framework: Including third party libraries (like lodash) for Ionic 2 using TypeScript setup

[NathanWalker]

I'm curious how to include third party libraries like lodash using the TypeScript setup. I see it's included as a dependency in package.json but I can't seem to use it...
I tried:

var _ = require('lodash');

in a component file but of course that gets a Cannot resolve module...

With SystemJS, I'd need something like this:

System.config({
  "map": {
    "lodash": "npm:[email protected]"
  }
});

But with the webpack setup, I'm not entirely sure.
This would apply to numerous other third party libraries that users may want to use. What's the best way forward on this?

[mhartington]

So there's a few ways you could do this.

import {Page} from 'ionic-framework/ionic';
import * as _ from 'lodash';

@Page({
  templateUrl: 'build/pages/page1/page1.html',
})
export class Page1 {
  constructor(
    ) {
    let myArray = [1,2,3,4]
    console.log(_.chunk(myArray, 2));
  }
}

This will import everything from lodash and make it available under the _ variable, something similar to

var _ = require('lodash');

Or you could do

import {Page} from 'ionic-framework/ionic';
import {chunk} from 'lodash';

@Page({
  templateUrl: 'build/pages/page1/page1.html',
})
export class Page1 {
  constructor(
    ) {
     let myArray = [1,2,3,4]
    console.log(chunk(myArray, 2));
  }
}

And import each method needed. This would be the preferred way as when try shaking lands in webpack, you'll only get the chunk method, not the whole lodash package.

[NathanWalker]

@mhartington Thanks for response, unfortunately when running ionic serve when trying any of the above I still get this:

∆ Compiling and bundling with Webpack...
√ Using your webpack.config.js file

∆ Compiling Sass to CSS
√ Matching patterns: app/app.+(ios|md).scss

∆ Copying fonts
√ Matching patterns: node_modules/ionic-framework/fonts/**/*.ttf

∆ Copying HTML
√ Matching patterns: app/**/*.html

√ Fonts copied to www/build/fonts
Unhandled rejection Error: Cannot resolve module 'lodash'

I assume something else in webpack.config still needs something?

[mhartington]

Could you provide the steps you too to get this?

[NathanWalker]

Since lodash is already installed as a dependency, I simply tried all your suggestions:
A.

import * as _ from 'lodash';

B.

import {chunk} from 'lodash';

...into any component and A and B both create the error.
I'm thinking webpack.config needs to be modified somehow.

[mhartington]

It shouldn't, it will automatically pull deps from node_modules.

Please post the steps to reproduce.

[NathanWalker]

@mhartington so sorry for the trouble. Turned out to be a strange permissions mishap on the node_modules folder in the local directory. Thanks again for the information above, was exactly what I needed to know :+1:

[beachygreg]

Has this changed? I tried the steps above and no go.

[mhartington]

This shouldn't have changed. Has the module been installed correctly and is it working? Make sure any non-typescript libraries have their definitions.

http://mhartington.io/post/ionic2-external-libraries/

[beachygreg]

@mhartington Followed the tutorial and it worked like a charm! Thanks a bunch I owe you one!

[jesperbruunhansen]

Hi @mhartington
Is your guide at http://mhartington.io/post/ionic2-external-libraries/ still the correct way to do it?

I've been struggling with importing an external module from npm (and followed your guide), but typescript cannot find the module :(

In short, this is what I have done

1. Created new project with ionic start my-project tutorial --v2 --ts
2. npm install backbone --save
3. npm install -g typings
4. typings install backbone --ambient --save
5. In app/app.ts import * as Backbone from 'backbone';

Gets this error: Error:(5, 27) TS2307: Cannot find module 'backbone'.

Any help?

[jlsuarezs]

Did you get it @jesperbruunhansen? Thank you.

[keithdmoore]

I got the same error except with lodash. I added this: /// <reference path="../typings/modules/lodash/index.d.ts" /> to the top of app.ts and the error went away.

@mhartington Would you update your blog post to reflect the proper or better way to do this now that Ionic is using gulp and browserify?

[seand88]

@mhartington same issue, blog is out of date, used same fix keith did to get it working. Mine also says that the --ambient tag is now depreciated....

[dimpu]

Finally able to fix the issue. The problem is with tsify and typings.

1) Update tsify version to 0.16.0 in node_modules/ionic-gulp-browserify-typescript/package.json
2) change from main.d.ts. to index.d.ts in node_modules/ionic-gulp-browserify-typescript/index.js
3) Remove typings folder from your project and Update your typings.json

{
  "globalDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
    "lodash": "registry:dt/lodash#3.10.0+20160619033623"
  }
}

4) Finally

npm i
typings install

That's it. I should work fine.

Following are my configurations.

OS: windows 10,
node: v4.4.5
npm: v3.9.5
ionic: 2.0.0-beta.32
typings: 1.3.0

I have created a new PR request to fix this issue @ https://github.com/driftyco/ionic-gulp-tasks/pull/37

[ToothpickFactory]

This is what I did to get lodash working without errors.

npm install lodash --save
npm install -g typings
typings install lodash --save // I left off --ambient. This made lodash a dependency
import {sum} from 'lodash' // In what ever file you want to use lodash

[gxsjtu]

why remove js version when use ionic start, typescript makes use npm packages so trouble

[alexmgrant]

Is there a way to do this globally for the entire project?

[sameera207]

If you having problems for Ionic 2 RC0 (just like me), I got it working by

1 ) npm install @types/lodash --save-dev --save-exact
2 ) import _ from 'lodash';

Originally posted on SO by Shamsher

[klemensz]

Hi, I have the following problem with importing video.js in Ionic 2 RC0. https://www.npmjs.com/package/video.js
1 ) npm install --save video.js
2 ) npm install @types/videojs --save-dev --save-exact
3 ) In the TS file: import videojs from 'video.js;

But it gives me the error: "error TS2307: Cannot find module 'video.js'."

[jmordica]

I'm having the same issue with jquery in Ionic 2 RC.

1. npm install @types/jquery --save-dev --save-exact
2. import * as $ from 'jquery';

Output:
bundle dev failed: Could not resolve 'jquery' from....

[DmitrySkripkin]

@jmordica import $ from 'jquery'; works.
P.S. I feel myself like monkey coder when use ionic2/ts/angular2. Docs are not very helpful.

[rastographics]

using ionic rc1, trying to get lodash to work.

when importing lodash like this:

import endsWith from 'lodash/endsWith';

there are no ts compile errors, and ionic build works with no errors.

but ionic serve gives me error

cannot find module 'lodash/endsWith'

also tried importing like this:

import * as _ from 'lodash';

but then I get error in BOTH ionic build and ionic serve

rollup: Export 'endsWith' is not defined by (file trying to import lodash)

[xiongemi]

since typings is not no longer used. how do we add 3rd-party library to ionic?

[mhartington]

http://ionicframework.com/docs/v2/resources/third-party-libs/

[larryaubstore]

The method from http://ionicframework.com/docs/v2/resources/third-party-libs/ does not seem to work.

I tried this:
npm install underscore --save-dev
import * as _ from "underscore"

I got the following error:
_$1.bind is not a function

[jmordica]

@larryaubstore you are correct. It does not.

Still looking for a more consistent approach.. It works for a select few modules widely used but not for others.

[cperez87]

I just updated to RC0 (i will update to RC2 right after) and I am getting the same problems with LinqSharp.
Cannot find module 'linqsharp'.
Any solutions yet?

I wanted to add. From WebStorm, the TS editor can navigate to the linqsharp definitions well. Only when I do ionic serve that the error message comes up.

[marticrespi]

I have a similar issue.

I have installed:

npm install material-design-lite

And I want to link a <script> in my index.html but when I execute ionic serve I get a 404 Not found, and the route is ok, If I click on it open this js properly. I am using RC3.

I think it can not read when is executed and try reading from www folder.

[Ashish1611]

can we use wifimanager in ionic 2+ angular 2

[mhartington]

Locking this issue. As this is not a specific issue regarding ionic, but a general question regarding typescript.