Angular CLI - Adding Third Party Libraries

The Angular CLI is a command line interface tool that allows us to quickly build and run our Angular applications. The CLI can help us quickly scaffold components and services in our app while following the best practices out of the box.

The CLI currently uses Webpack under the hood to handle module bundling in our apps. Webpack is a great open source tool that allows adding third part ES2015 modules easily to JavaScript applications.

So lets start with adding a popular library, Lodash. Lodash is a great JavaScript utility library that's commonly used in single page apps.

Step 1: NPM

First we need to install Lodash from npm.

npm install lodash --save

Now that we have installed Lodash we need to install the TypeScript type definitions to allow our code to have better auto-competion and development experience. If you use a library that was written in TypeScript such as RxJS you don't have to worry about installing the type definitions.

npm install @types/lodash --save

Now that lodash is installed we can import it into any file in our app.

import * as _ from 'lodash';

Global Files

Sometimes we need to load global scripts or CSS files into our projects that are not module based. The Angular CLI has a configuration option to load files such as these. In the angular.json you can find a styles and scripts option where you can add the file paths of any files you would like globally bundled with you application. Note these files are bundled first before the rest of our module bundle.

"styles": [
  "styles.css"
],
"scripts": []

TypeScript Definitions

If you have to add a JavaScript file to your bundles but the JavaScript file does not include the proper TypeScript definitions then you can declare your own type definitions. In the src directory of your Angular CLI project you can add a typings.d.ts file to add your type definitions for code not written in TypeScript.

// typings.d.ts
declare module 'test' {
  const name: string;
}

Now I can import the following code and TypeScript will assume it will be there
at runtime.

import { name } from 'test';

So with these few options its relatively easy to add third party JavaScript and
CSS to our Angular CLI applications.