Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan

Angular CLI - Adding Third Party Libraries

Cory Rylan

- 1 minute


This article has been updated to the latest version Angular 15 and tested with Angular 14. The content is likely still applicable for all Angular 2 + versions.

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


No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts


Using Web Components in Angular Forms with Element Internals

Learn how to create and use Web Components in Angular apps leveraging the new Element Internals APIs.

Read Article
VMWare Clarity

Building forms with Angular and Clarity Design

Learn how to create high-quality forms using Angular and the Clarity Design System.

Read Article

Using HTML5 Date Input with Date Objects and Angular

Learn how to use JavaScript Date Objects with the native HTML5 datepicker and Angular Forms.

Read Article