NPM-Bibliotheken in Angular mit Angular-CLI einschließen und verwenden

Question

Ich versuche die progressbar.js-Bibliothek von npm in meiner Angular 2-Anwendung zu verwenden, die Angular-CLI verwendet.

Ich habe es mit npm install progressbar.js --save installiert. Die Dokumentation von progressbar.js sagt, es mit var ProgressBar = require('progressbar.js') zu verwenden, die ich nicht verwenden kann, weil ich SystemJS nicht habe.

suchte ich ein wenig und fand eine Lösung, die es in den Skripten Array des Winkel cli.json aufzunehmen, was ich auch tat:

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

Die Anwendung kompiliert fein mit ng serve, aber ich wirklich couldn‘ wie Sie die mitgelieferte Bibliothek nutzen können. In meiner Komponente habe ich verschiedene Importanweisungen wie import * as Progressbar from 'progressbar.js/dist' oder import { Progressbar } from 'progressbar.js/dist' ausprobiert, aber keine von ihnen zum Laufen gebracht.

Weiß jemand, wie ich diese Bibliothek benutzen kann?

Answer 1

Da ProgressBar nicht als TypeScript-Klasse exportiert wird, können Sie die Anweisung import nicht verwenden, um sie in Ihre Komponente zu importieren.

Nachdem Sie die Datei progressbar.js in das Array scripts von angular-cli.json aufgenommen haben, reicht es aus, die folgende Zeile in die Komponenten einzufügen, in denen Sie sie verwenden müssen: declare var ProgressBar: any;. Diese Anweisung ist eine Problemumgehung, die die Verwendung von JavaScript-Bibliotheken von Drittanbietern in einer TypeScript-Klasse ermöglicht.

Beispiel app.component.js - einfach Drucken Sie das Objekt in der Konsole:

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); 
    } 
}