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:
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
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
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
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:
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:
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.