{"id":264,"date":"2020-08-19T11:47:33","date_gmt":"2020-08-19T09:47:33","guid":{"rendered":"http:\/\/www.myblog.nguenkam.com\/?p=264"},"modified":"2020-08-19T12:01:19","modified_gmt":"2020-08-19T10:01:19","slug":"how-to-use-javascript-libraries-in-angular-2-apps","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2020\/08\/19\/how-to-use-javascript-libraries-in-angular-2-apps\/","title":{"rendered":"How to use JavaScript libraries in Angular 2+ apps"},"content":{"rendered":"\n

Sometimes for any reason you might need to use some JavaScript libraries into your project<\/em> and you need to know how to use them in Angular. So, let\u2019s get started from zero<\/p>\n\n\n\n

1. Create a new project using Angular CLI<\/h4>\n\n\n\n

If you already don\u2019t have CLI installed on your machine, install it<\/a>, after installation, create a new project.<\/p>\n\n\n\n

ng new learning<\/code><\/pre>\n\n\n\n
now you will have a new Angular project named \u201clearning<\/strong>\u201d<\/p>\n\n\n\n
2. Install the package into your project<\/strong><\/h4>\n\n\n\n
Go to the project we just made:<\/p>\n\n\n\n
cd learning<\/code><\/pre>\n\n\n\n
Use your preferred package manager (npm? yarn? … ?) to install the library you\u2019re going to use; I use npm<\/code>  here to install  underscore.js<\/code><\/p>\n\n\n\n
npm install --save underscore<\/code><\/pre>\n\n\n\n
3. Import the library into Angular (TypeScript)<\/h4>\n\n\n\n
We are writing codes in TypeScript, and we should follow its rules. TypeScript needs to understand underscore.js<\/code><\/p>\n\n\n\n
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.<\/p>\n\n\n\n
In JavaScript, type of arguments are not important and you will not get an error while you\u2019re writing code, but TypeScript won\u2019t 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<\/code> in TypeScript and define types there?<\/p>\n\n\n\n
Of course not, TypeScript provides declaration files (*.d.ts) <\/em>which define types and standardize a JavaScript file\/libraries for TypeScript.<\/p>\n\n\n\n
Some libraries includes typing file and you don\u2019t need to install TypeScript\u2019s type destination for them. But in case a library does not have .d.ts<\/code> file, you need to install it.<\/p>\n\n\n\n
We just need to find and import underscore.js<\/code> type definition file. I suggest you to use Type Search<\/a> to find declaration file for the libraries you need.<\/p>\n\n\n\n
Search for underscore<\/code> in Type Search<\/a> and it redirects you to types\/underscore<\/a>. Install the declaration file using the following command:<\/p>\n\n\n\n
npm install --save @types\/underscore<\/code><\/pre>\n\n\n\n
4. Import type declaration into Angular app<\/h4>\n\n\n\n
Let\u2019s say you\u2019re going to use underscore in your app.component.ts<\/code> file, open the app.component.ts<\/code> by your IDE and add the following code in top of the file:<\/p>\n\n\n\n
import * as _ from 'underscore';<\/code><\/pre>\n\n\n\n
OR simply: <\/code><\/pre>\n\n\n\n
 import 'underscore';<\/code><\/pre>\n\n\n\n
TypeScript in that component now understand _<\/code> and it easily works as expected.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Question: How to use a library which does not have type definition (*.d.ts) in TypeScript and Angular?<\/h4>\n\n\n\n
Create if the src\/typings.d.ts<\/code> does not exist, otherwise open it, and add your package to it:<\/p>\n\n\n\n
declare var yourLibrary: any;\n<\/code><\/pre>\n\n\n\n
In your TypeScript now you need to import it by the given name:<\/p>\n\n\n\n
import * as yourPreferedName from 'yourLibrary';\nyourPreferedName.method();<\/code><\/pre>\n\n\n\n
conclusion<\/h5>\n\n\n\n
As conclusion let\u2019s make a simple example to see a working example of _<\/code>. Open app.component.ts<\/code> and inside the appComponent<\/code> class write a constructor<\/code> which returns the last item of an array using underscore _.last()<\/code> function:<\/p>\n\n\n\n
\n
...\nimport * as _ from 'underscore';\n...\nexport class AppComponent {\n  constructor() {\n    const myArray: number[] = [9, 1, 5];\n    const lastItem: number = _.last(myArray); \/\/Using underscore\n    console.log(lastItem); \/\/5\n  }\n}<\/code><\/pre>\n<\/div><\/div>\n\n\n\n
If you open your Angular app now, you will get 5<\/code> in the console which means we could correctly add underscore<\/code> into our project and it\u2019s working as expected.<\/p>\n\n\n\n
You can add any JavaScript libraries to your project just by following the same steps.<\/p>\n\n\n\n
Reference:<\/h5>\n\n\n\n
https:\/\/hackernoon.com\/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Sometimes for any reason you might need to use some JavaScript libraries into your project and you need to know how to use them in Angular. So, let\u2019s get started from zero 1. Create a new project using Angular CLI If you already don\u2019t have CLI installed on your machine, install it, after installation, create a new […]<\/p>\n","protected":false},"author":1,"featured_media":268,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,37,5,38],"tags":[40,43,29,39,42],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/264"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=264"}],"version-history":[{"count":5,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/264\/revisions"}],"predecessor-version":[{"id":278,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/264\/revisions\/278"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/268"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}