Include and use NPM Libraries in Angular with Angular-CLI

Question

I am trying to use the progressbar.js library from npm in my Angular 2 application which uses Angular-CLI.

I installed it with npm install progressbar.js --save. The documentation of progressbar.js says to use it with var ProgressBar = require('progressbar.js'), which I can't use because I don't have SystemJS.

I searched a bit and found a solution to include it in the scripts array of the angular-cli.json, which I did:

"scripts": [
     "../node_modules/progressbar.js/dist/progressbar.js"
  ],

The application compiles fine with ng serve, but I really couldn't figure how to make use of the included library. In my component I tried different import statements like import * as Progressbar from 'progressbar.js/dist' or import { Progressbar } from 'progressbar.js/dist' but didn't get any of them to work.

Does anyone know how I can use this library?

Tudor Ciotlos · Accepted Answer · 2016-11-23 17:55:21Z

3

Since ProgressBar is not exported as a TypeScript class you will not be able to use the import statement to import it into your component.

After including the progressbar.js file in the scripts array of angular-cli.json, it enough to add the following line in the components where you need to use it: declare var ProgressBar: any;. This statement is a workaround which enables using third party JavaScript libraries in a TypeScript class.

Example app.component.js - simply printing the object in the console:

import { Component, OnInit } from '@angular/core';
declare var ProgressBar: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app works!';

  ngOnInit() {
    console.log(ProgressBar);
  }
}

answered Nov 23, 2016 at 17:55

Tudor Ciotlos

1,8455 gold badges30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Lerps Over a year ago

Thanks. I tried it and it works... Just trying to understand now how I can figure out which variable name to declare for an abitrary library. Obviously ProgressBar in this case is an easy guess but I'm sure there is a better way then guessing... Was just now looking through some files in the node_modules but could find an obvious declaration, export, configuration, ...

Tudor Ciotlos Over a year ago

@DanielLerps Usually these JavasScript libraries add a reference to an object (ProgressBar in your case) to either the window or the global object. If you open up the progressbar.js file you can see how this reference is added, although the code is not very readable.

Collectives™ on Stack Overflow

Include and use NPM Libraries in Angular with Angular-CLI

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related