Search code examples
angularjustgage

Angular 2 using third party libraries in template


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


Solution

  • 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"
      ],