How to include external JavaScript libraries in Angular 2?

Question

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.

What do you to implement your application: es5 or es6? which a module loader if any? — Thierry Templier
– Thierry Templier, Commented Apr 22, 2016 at 13:23

Thierry Templier · Accepted Answer · 2016-04-22 13:43:32Z

1

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).

answered Apr 22, 2016 at 13:43

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

4 Comments

Vijith Over a year ago

Hi thiery, what if i want to do the same thing in es5? without using the export..that is what if i am dependent on external libraries, which i cant modify?

Thierry Templier Over a year ago

Otherwise you include the file within a script tag but your hello variable will global :-(. Most of external libraries support a module manager like commonjs or systemjs. Notice that you can configure a commonjs-compliant module into systemjs. Which external libraries do you want to use?

Thierry Templier Over a year ago

I seems that strophe.js supports amd for module loader (which is supported by systemsjs). You could try to use this configuration: System.config({ map: { 'strophe.js': 'node_modules/strophe.js/strophe.js' }});

Thierry Templier Over a year ago

This way you will be able to import it this way: import {strophe} from 'strophe.js';

DeusProx · Accepted Answer · 2016-04-22 18:30:56Z

1

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

answered Apr 22, 2016 at 18:30

DeusProx

1973 silver badges15 bronze badges

2 Comments

DeusProx Over a year ago

This comment to a similiar question gives the best answer: stackoverflow.com/a/35799163/5271798

Vijith Over a year ago

thank you for the answer..i tried a similar approach and it worked. But concern is the socket.io is globally known :(

Collectives™ on Stack Overflow

How to include external JavaScript libraries in Angular 2?

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related