Using ES6 Modules

The easiest way to add third-party libraries is to use ES6 Modules. A library, which is exported declaratively, could be loaded in a few straightforward steps.

Let’s simulate this way by installing Lodash in our project:

npm install lodash

Yay, Lodash is installed! - now let’s use it:

Now that isEmpty is imported - we’re able to invoke that method. But what will happen when we import this method like that way in another file? Will it be loaded twice?

Basically, ES6 Modules are singletons. So, if a module is imported multiple times, we can be sure it will be evaluated and loaded into the bundle only once.

In practice, we “cherry-picked” the isEmpty method of Lodash specifically in order to reduce the bundle size.

Note: If you want to enable tree-shaking by Webpack - you should consider installing lodash-es and importing the methods out of it (for instance: import isEmpty from 'lodash-es/isEmpty').

Global Scripts & Styles

ES6 Modules are a superb way to use third-party libraries. However, not all the third-party libraries support it, such as jQuery, Bootstrap and more. Don’t be panic - Angular CLI provides a declarative way to handle these libraries through the .angular-cli.json file.

To explain - let’s install Bootstrap 4 which is based on jQuery and Popper.js:

npm install jquery
npm install popper.js
npm install bootstrap@next

Popper.js arrives with its typings file, thus we don’t have to install for it. Let’s install the other typings:

npm install @types/jquery --save-dev
npm install @types/bootstrap --save-dev

Note: We use typings modules for getting the desired autocomplete functionality in the IDE.

As an additional step, we open tsconfig.app.json. Then, we should add jQuery and Bootstrap to the types array so the TypeScript compiler will recognize those:

"types": [
  "jquery",
  "bootstrap"
]

All right, the libraries were installed - but now we’d like to figure out how to inject them. The first step will be to open to the .angular-cli.json file.

Now, we should look for the injected scripts array and add the relevant files of jQuery, Popper.js and Bootstrap:

In like manner, we’ll add the styles file of Bootstrap to the injected styles array:

Well, what we did here, is to load the third-party’s scripts before that the Angular application starts to initialize. In fact, that’s the equivalent of injecting these files as scripts tags of index.html, which means these scripts are on the global scope or in other words - on the Window object. Just like that, the styles are injected as link tags.

Here’s the result:

External Assets

So far we examined adding of third-party libraries using ES6 Modules and global sources. Our mission now is to add a third-party library that includes some additional resources.

Iconic is a perfect choice. Let’s install it:

npm install open-iconic

Like before, we should navigate to .angular-cli.json file and find the injected assets. But, suppose we want to inject all the SVGs which are provided by that third-party - by now, we injected each file specifically. So, how should we do that?

One option on the table is copying of the SVGs directory into our codebase manually. However, we don’t want to mingle with an external code. Against that - Angular CLI supports injecting of external assets using node-glob.

Here’s the way to inject the whole directory:

It means that all SVGs are available to be bundled and served as part of assets - we just have to access it.

Take an example that uses a specific SVG:

Recap

We introduced three different use-cases for adding a third-party library into our Angular CLI project: ES6 Modules, scripts & styles on the global scope and importing of external assets.

The sample project is available here.