Hur inkluderar man externa JavaScript-bibliotek i Angular 2?

Jag försöker inkludera ett externt JS-bibliotek i min Angular 2-app och försöker göra alla metoder i den JS-filen till en tjänst i Angular 2-appen.

Till exempel: låt oss säga att min JS-fil innehåller.

var hello = {
   helloworld : function(){
       console.log('helloworld');
   },
   gmorning : function(){
      console.log('good morning'); 
   }
}

Så jag försöker använda den här JS-filen och återanvända alla metoder i det här objektet och lägga till det i en tjänst, så att min tjänst har publika metoder, som i sin tur anropar dessa JS-metoder. Jag försöker återanvända koden utan att implementera alla metoder igen i min TypeScript-baserade Angular 2-app. Jag är beroende av ett extern bibliotek som jag inte kan ändra. Snälla hjälp, tack på förhand.

Svar #1

Med ES6 kunde du exportera din variabel:

export var hello = {
  (...)
};

och importera det så här till en annan modul:

import {hello} from './hello-module';

förutsatt att den första modulen finns i filen hello-module.js och i samma mapp som den andra. Det är inte nödvändigt att ha dem i samma mapp (du kan göra något som detta: import {hello} from '../folder/hello-module';). Det viktiga är att mappen hanteras korrekt av SystemJS (till exempel med konfigurationen i packages-blocket).

Svar #2

När du använder externa bibliotek som laddas in i webbläsaren externt (t.ex. via index.html) behöver du bara säga till dina tjänster/komponent att det är definierat via "declare" och sedan använda det. Till exempel använde jag nyligen socket.io i min angular2-komponent:

import { Component, Input, Observable, AfterContentInit } from angular2/angular2';
import { Http } from 'angular2/http';

//needed to use socket.io! io is globally known by the browser!
declare var io:any;

@Component({
  selector: 'my-weather-cmp',
  template: `...`
})
export class WeatherComp implements AfterContentInit{
  //the socket.io connection
  public weather:any;
  //the temperature stream as Observable
  public temperature:Observable<number>;

    //@Input() isn't set yet
    constructor(public http: Http) {
      const BASE_URL = 'ws://'+location.hostname+':'+location.port;
      this.weather = io(BASE_URL+'/weather');
      //log any messages from the message event of socket.io
      this.weather.on('message', (data:any) =>{
        console.log(data);
      });
    }

    //@Input() is set now!
    ngAfterContentInit():void {
      //add Observable
      this.temperature = Observable.fromEvent(this.weather, this.city);
    }
}