Angular2 importing custom javascript libraries

Question

I'm reusing several custom made javascript libraries that are useful for my actual project with angular2, my problem is after search in google and this site none of the answer have helped me, some of the solutions are hacky, i was wondering since angular2/4 was released oficially, there is any way to do this, in an proper way?

Edit: I'm adding more details, some of those libraries are for leaflet, i don't want to change to angular2-leaflet because some of the plugins like leaflet geotagged photos it has been updated since 3 years ago. i actually can see the map in the page if i load the script like this:

ngAfterViewInit() {

    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "./resources/js/app/visitantes_leaflet.js";
    this.elementRef.nativeElement.appendChild(s);

  }

but i can't send data or call methods from there (i tried to use good ol' js events on the html). the answer from @Michal doesn't show the map, the @Joo Beck answer's 'works' but show this error : Error: Map container not found. because <div id="map"> is not added before L.map('map').

so what's the problem? import them and use them the way it's done with rxjs — Max Koretskyi
– Max Koretskyi, Commented May 18, 2017 at 18:47
@Maximus i said before, none of those solutions really worked — Progs
– Progs, Commented May 18, 2017 at 18:50

Joo Beck · Accepted Answer · 2017-05-18 20:13:08Z

2

You should probably mention what you have tried and what hasn't worked, so we can help you locate a solution without wasting time. It would also be useful if you mention if you are using typescript or javascript. It seems like you are using javascript, but if you are using typescript that coudl explain why you are having issue.

If you are using typescript, what has worked for me is just a declare var, and an import, like so.

declare var RecordRTC: any;

import "../../dependencies/RecordRTC.js";

The declare just lets the typescript know that what it needs is there, it can access it once it is transpiled.

answered May 18, 2017 at 20:13

Joo Beck

1,9131 gold badge18 silver badges21 bronze badges

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

1 Comment

Progs Over a year ago

i get this error: you may need an appropriate loader to handle this file type when encounters a function

Michal · Accepted Answer · 2017-05-18 18:50:50Z

1

In your angular-cli.json file (located in root dir) add your javascript libraries to app[0].scripts array

{
 "project": {
  },
  "apps": [
    {
     ...
      "scripts": [
        "../node_modules/custom-library/main.js",
      ],
    }
  ],
}

answered May 18, 2017 at 18:50

Michal

314 bronze badges

Collectives™ on Stack Overflow

Angular2 importing custom javascript libraries

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related