Setting a Javascript library as global in Angular
So you found that cool magic ultra-awesome library that will solve all your problems in your Angular application, only one problem… that library needs another library didn’t wrap in an Angular module, or even worse, the library itself has no wrapper so all you have is a brand new super sport V8 car without wheels
That’s what happened to me the first time I wanted to use a library called ng2-select2. It’s a cool library that helps you with your select elements in an angular application. The problem came out when the documentation said that slect2 library was necessary and it ended up needing jQuery as well. Both of them, JS libraries.
Besides, ng2-select2 library needs both of them as global libraries. This let them be reached across all the application (and it’s not necessarily a bad thing as probably you’ll need your JS library to be free like a bird and be available by you anywhere in your application)
Whatever it is, I’m gonna tell you how to implement and use a global Javascript library into your angular Application and for all practical purposes I’m gonna do it with ng2-select2 and its dependencies (essentially same for any JS library)
1- First thing you have to do is install your main library -ng2-select2 here- and save it in your package.json as it follows (omit this step if you are interested only in a JS library itself)
npm i -S ng2-select2
**Note: you can add your JS libraries like an ordinary JS application by using a CDN and link them with a script tag into your index.html file, however it’s not a good approach as it’s not recommended by angular team (and in most cases you won’t want be touching index.html file), so try to avoid this and continue with step 2
2- As specified in the documentation, it needs select2 and jQuery libraries in order to work, then…
npm i -S jquery select2
Easy peasy isn’t it? Does it means is everything runs sweet? Well… NOPE
The next you need to do is make your JS libraries global for your application, so they are reachable everywhere in the app.
4. Import your JS libraries in the “scripts” array into your .angular-cli.json file as it follows
**Note: Don’t forget to re-run your app due this file is not watched by the demon angular projects comes with
And that’s it! If you need to install any other JS library into your app, just follow the same steps and put it in the array script as shown above
WAIT! YOU SAID WE CAN USE THOSE JS LIBRARIES ANYWHERE IN MY APP!
Yes I did, and in order to do that I deeply suggest you to install the typings for any JS library you want to use (if there is any). It lets you type your library objects making your life easier (after all this is Typescript!, that’s the greatness of it)
5. Install the typings files you need (Optional)
npm i -S -D @types/jquery @types/select2
DON’T import the library you need to use into your component with the import statement (eg. import * as $ from ‘jquery’;) by doing so you’ll end up with two instances of the library (no cool!).
6. Just use it as it was already import into your component (please don’t kill me for using jQuery with Angular!)
And that’s it!. Easy isn’t it? If you find a better approach or find an error on my approach let me know. See you next time ;)
