Using Third-Party Libraries in Angular Apps

So you want to use a third-party library like jQuery or Lodash in your Angular 2+ project, but not sure how? Here’s the step by step breakdown, taking Lodash as the example:

1. Installing Lodash

First start by installing Lodash itself in your project with npm:

$ npm install --save lodash

Or with Yarn:

$ yarn add lodash

2. Install the TypeScript type definitions

You can search for the available typings for your library using this tool: TypeSearch.

In our case, the typings for Lodash are packaged as @types/lodash, so we can install them with npm:

$ npm install --save @types/lodash

Or with Yarn:

$ yarn add @types/lodash

3. Import

Now Lodash is ready to be imported in your components with an import statement like this:

import * as _ from "lodash";

Notice how we import everything from Lodash and give it an alias of _, so that it can be used as usual.

You can now test that Lodash is working with something like the following in your component class:

fruits = ['bananas', 'oranges', 'strawberries', 'kiwis'];

If you open your browser and check the console, you’ll see that _.chunk worked and the console logs our two arrays.