Angular 2 using third party libraries in template

Question

I'm trying to use a third party (JustGage) in my application I've loaded it correctly in the angular-cli.json file and im able to instanciate it like this in my component

ngAfterViewInit() {
    var g = new JustGage({
      id: "gauge",
      value: 67,
      min: 0,
      max: 100,
      title: "System Health"
    });
}

this actually works nice but i noticed my IDE complaining about

Cannot find name 'JustGage'

When i tried to build the application the compilation failed due to this error.

How do i solved this issue?

BTW i tried declaring a JustGage: any and then call this.JustGage , but the gauge is not rendered and the console UPDATE

declare var require: any;
var JustGage = require("justgage/justgage.js");

So the require brings something but its not the JustGage says that JustGage is not a constructor...

Answer 1

so since it was already working the issue was not the actual usage of the third party library but a typescript issue it was solved by

declare var JustGage: any;

in the import section after that i was able to compile

just in case it helps someone, thew actual loading of the scripts is done in the angular-cli.json

"scripts": [
    "../node_modules/chart.js/dist/Chart.js",
    "../node_modules/justgage/raphael-2.1.4.min.js",
    "../node_modules/justgage/justgage.js"
  ],

Answer 2

If you are trying to access that JustGage library you will have to either import it if you're using es6 syntax or require it otherwise.

Using the name like this means you're assuming that is a global variable.

import {JustGage} from 'path/JustGage'

Or you can put this line in your file (supposing you're using typescript, otherwise change the extension to whatever you want):

/// <reference path="path/JustGage.d.ts" />

And of course you will have to reference your lib somewhere in your index.html or config.