Angular 2 - External Libraries

This is the fifth in a series of posts describing how to build an Angular 2 application from the ground up by using the Angular CLI.  Previous installments in the series can be found here, here, here, and here.  I'm going to build on what I did in those posts so it would probably help to at least be a little bit familiar with what I did there.  If you want to skip those first four installments you can get the code that was generated during the fourth installment by visiting Github (here) and switching to the routing-part-deux branch.

In this installment we're going to learn how to use external libraries, and some pitfalls to watch out for when you do it.  We've got a lot of functionality, but our website looks... well, bad.  Let's use Bootstrap to make it look better.  I'll go ahead and tell you right now that I'm not a design expert so even when we're completely finished here our site might not look very "good", but it will look better than it does right now.

The first thing we need to do is get bootstrap.  As of this writing Bootstrap 4 is in alpha, but I like what they're doing with it so that's actually what I'm going to use.  It doesn't matter, though.  The point of this post is to show you how to use any third party library, not specifically Bootstrap.  Assuming the library you want to use has an npm package you'd go ahead and install the package at the root level of your module (D:\Dev\Learning\Angular2\Cli\ProveIt).  I'm running npm install bootstrap@4.0.0-alpha.6 --save, which will install that specific version of Bootstrap and save it as a dependency.  This also installs Boostrap's dependencies (jQuery and tether) so we're all good to start using it now.

Now that we've got it installed we need to include the appropriate references in our project.  In a pure JavaScript application we'd just add a <script> tag to our index.html and we'd be all set, but that's not how we do things with the Angular CLI.  We need to add a reference to the bootstrap css that's now in our node_modules folder.  Open your .angular-cli.json file and add the relative path reference to bootstrap's css (or sass or scss) file to the styles array.  The styles array should be around line 21 and should currently contain a single value: styles.scss (remember we modified this array in the first installment of this series, too).  My relative reference is "../node_modules/bootstrap/scss/bootstrap.scss".  As soon as you've added that, serve the application and you should immediately see that your links are styled slightly differently.

That's all well and fine if the external library has an npm package, but what if it doesn't?  That's easy enough, too.  For the sake of demonstration let's say you want to use a custom build of Bootstrap, which is a common enough scenario.  So you go to getbootstrap.com and build your customized version, which includes CSS and JavaScript files you need to include.  You unzip them and save the minified files... where?  I like to create a vendor directory in my Angular CLI project directory so I'd save my files in D:\Dev\Learning\Angular2\cli\ProveIt\src\vendor\bootstrap.  Once the files are in a directory I can reference I need to add them to my .angular-cli.json file the same as I did before.  This time I also have a .js file I want to reference so I also need to modify the scripts array, which is just after the styles array in the same .json file.  My references are "./vendor/bootstrap/bootstrap.min.css" and "./vendor/bootstrap/bootstrap.min.js".  I removed my other bootstrap reference just to be sure everything is working as desired and when I serve my app again it looks good.

As far as I can tell, the CLI will respect import order so if you have conflicting styles in some stylesheets, the last styles imported will be used.

Right now I'm getting an error in my console that says that "Bootstrap's JavaScript requires jQuery at eval", which tells me I forgot to include jQuery in my scripts array.  I'll just add the reference to it from my node_modules folder and I'll be all set.

I'm going to do a little bit of styling, but I'm not going to describe it here.  I'm basically just going to move things towards the center of the page, use a jumbotron and list item styling to make my students page look better.  You can do your own or view my completed code on Github (the link is below).

There's another way to reference external libraries for consumption within an Angular project, but I'm not going to cover that quite yet.  It will probably be the topic of the next installment of this guide.  For now, the final code from this module can be found on Github (here).  Switch to the external-libraries branch.