How to use JavaScript libraries in Angular 2+ apps

Do you remember when you were learning AngularJS (version 1), tutorials kept telling you that you don’t need to add JQuery into your project? That still did not change, you don’t need to add JQuery to your Angular 2+ project, but for any reason you might need to use some JavaScript libraries and you need to know how to use them in Angular. So, let’s get started from zero

I’m going to add underscore.js to a project and show you how it works.

1. Create a new project using Angular CLI

If you already don’t have CLI installed on your machine, install it, after installation, create a new project (if you already don’t have one)

ng new learning

now you will have a new Angular project named “learning”

2. Install the package into your project

Go to the project we just made:

cd learning

Use your preferred package manager to install the library you’re going to use; I use npm to install underscore.js

npm install --save underscore

3. Import the library into Angular (TypeScript)

We are writing codes in TypeScript, and we should follow its rules. TypeScript needs to understand underscore.js

As you might know TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript has its own syntax, function and variables can have defined types, but when we are going to use an external library such as underscore we need to declare type definitions for TypeScript.

In JavaScript, type of arguments are not important and you will not get an error while you’re writing code, but TypeScript won’t let you to give an array to a function that accepts string as input. Then here is the question that should we rewrite the underscore.js in TypeScript and define types there?

Of course not, TypeScript provides declaration files (*.d.ts) which define types and standardize a JavaScript file/libraries for TypeScript.

Some libraries includes typing file and you don’t need to install TypeScript’s type destination for them. But in case a library does not have .d.ts file, you need to install it.

We just need to find and import underscore.js type definition file. I suggest you to use Type Search to find declaration file for the libraries you need.

Search for underscore in Type Sceach and it redirects you to types/underscore. Install the declaration file using the following command:

npm install --save @types/underscore

4. Import type declaration into Angular app

Let’s say you’re going to use underscore in your app.component.ts file, open the app.component.ts by your IDE and add the following code in top of the file:

import * as _ from 'underscore';

/*** OR simply:* import 'underscore';*/

TypeScript in that component now understand _ and it easily works as expected.

Question: How to use a library which does not have type definition (*.d.ts) in TypeScript and Angular?

Create if the src/typings.d.ts does not exist, otherwise open it, and add your package to it:

declare var 

In your TypeScript now you need to import it by the given name:

import * as yourPreferedName from 'yourLibrary';yourPreferedName.method();

Conclusion

As conclusion let’s make a simple example to see a working example of _. Open app.component.ts and inside the appComponent class write a constructor which returns the last item of an array using underscore _.last() function:

...import * as _ from 'underscore';...export class AppComponent {constructor() {const myArray: number[] = [9, 1, 5];const lastItem: number = _.last(myArray); //Using underscoreconsole.log(lastItem); //5}}

If you open your Angular app now, you will get 5 in the console which means we could correctly add underscore into our project and it’s working as expected.

You can add any JavaScript libraries to your project just by following the same steps.

You can follow me for more articles on technology and programming