How to include external JavaScript libraries in Angular 2?

I am trying to include an external JS library in my Angular 2 app and trying to make all the methods in that JS file as a service in Angular 2 app.

For eg: lets say my JS file contains.

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

So I am trying to use this JS file and reuse all the methods in this object and add it to a service, so that my service has public methods, which in turn calls this JS methods. I am trying to reuse the code, without reimplementing all the methods in my typescript based Angular 2 app. I am dependent on an external library, which I cant modify.
Please help, thank you in advance.

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

With ES6, you could export your variable:

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

and import it like this into another module:

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

assuming that the first module is located into the hello-module.js file and in the same folder than the second one. It’s not necessary to have them in the same folder (you can do something like that: import {hello} from '../folder/hello-module';). What is important is that the folder is correctly handled by SystemJS (for example with the configuration in the packages block).

Jason
Guest

When using external libs which are loaded into the browser externally (e.g. by the index.html) you just need to say your services/component that it is defined via “declare” and then just use it. For example I recently used socket.io in my angular2 component: 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… Read more »