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:lodash@3.8.0"
  }
});

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 👍

[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?

[eusthace811]

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....