Cory Rylan

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

Follow @coryrylan
Angular

Angular CLI - Adding Third Party Libraries

Cory Rylan

- 1 minute

Updated

This article has been updated to the latest version Angular 17 and tested with Angular 16. 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": [
"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.

Twitter Facebook LinkedIn Email
 

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

Related Posts

Angular

Creating Dynamic Tables in Angular

Learn how to easily create HTML tables in Angular from dynamic data sources.

Read Article
Web Components

Reusable Component Patterns - Default Slots

Learn about how to use default slots in Web Components for a more flexible API design.

Read Article
Web Components

Reusable Component Anti-Patterns - Semantic Obfuscation

Learn about UI Component API design and one of the common anti-patterns, Semantic Obfuscation.

Read Article