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. Add underscore to your Angular app

Maybe you’re thinking about adding a direct link to the underscore.js right in your index.html; But that’s not how we do it!

We created the project using Angular CLI, in the root directory of your project, you should have .angular.cli.json

In .angular.cli.json file, you will see"scripts":[] which will help you to add *.js files into your project.

For using underscore library we need to add its main underscore.js file into our project. We already installed underscore used npm then underscore.js is inside node_modules directory, in .angular.cli.json add this:

"scripts":[
"../node_modules/underscore/underscore.js"
]

4. Run Angular app

Angular CLI will help you for lots of things, one of them is building and serving your project and localhost

ng serve --open

5. Check if your library is added to your project (optional)

By the help of browsers developer tools, you can check if the JavaScript file added correctly to your project or not.

Right click on the page, and choose inspect (it depends on the browser), then on the developer tools, choose console tab and here is where you can write codes to test! now just to check if underscore.js correctly added to our project, we need to write _ inside the console tab and hit enter.

You should not get an error like “Uncaught ReferenceError: _ is not defined

We are almost done, we just need to tell TypeScript that we are going to use underscore.js library.

6. How to tell TypeScript to support our library?

Don’t forget that we are writing codes in TypeScript, add we should follow its rules. TypeScript needs to understand underscore.js

As you might already know TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript has its own syntax, function and variables should have 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/library for TypeScript.

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

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

npm install --save @types/underscore

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

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

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

Thanks for reading & Happy codding


If you liked the article, click the 💚 below so other people will see this here on Medium. Follow me for more articles on technology and programming.