Angular 2: import external js file into component

by

Ideally you need to have .d.ts file for typings to let Linting work.

But It seems that d3gauge doesn’t have one, you can Ask the developers to provide and hope they will listen.

Alternatively, you can solve this specific issue by doing this

declare var drawGauge: any;

import "https://stackoverflow.com/questions/37081943/js/d3gauge.js";
export class MemMonComponent {
    createMemGauge() {
        new drawGauge(this.opt);  //drawGauge() is a function inside d3gauge.js
    }
}

If you use it in multiple files, you can create a d3gauage.d.ts file with the content below

declare var drawGauge: any;

and reference it in your boot.ts (bootstrap) file at the top, like this

///<reference path="../path/to/d3gauage.d.ts"/>

More Related Contents:

  1. Load new modules dynamically in run-time with Angular CLI & Angular 5
  2. Angular 2 – communication of typescript functions with external js libraries
  3. What are differences between SystemJS and Webpack?
  4. Angular: 7.2.1 ES6 class ReferenceError : Cannot access ‘X’ before initialization
  5. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  6. Angular 2 Sibling Component Communication
  7. JS : Convert Array of Strings to Array of Objects
  8. How can I close a dropdown on click outside?
  9. In Angular, how do you determine the active route?
  10. How do I generate sourcemaps when using babel and webpack?
  11. How to Update a Component without refreshing full page – Angular
  12. script tag in angular2 template / hook when template dom is loaded
  13. How to add background-image using ngStyle (angular2)?
  14. Separate Angular2 TypeScript files and JavaScript files into different folders, maybe ‘dist‘
  15. Conditional build based on environment using Webpack
  16. Importing CSS files in Isomorphic React Components
  17. Call a function on click event in Angular 2
  18. Angular2 too many file requests on load
  19. How to add bootstrap in angular 6 project? [duplicate]
  20. Webpack: Bundle.js – Uncaught ReferenceError: process is not defined
  21. Angular2 dynamic change CSS property
  22. Example of how to load static CSS files from node_modules using webpack?
  23. Plain Javascript as Angular 2 service
  24. TypeScript TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’
  25. Angular 2 AuthGuard Service with redirect?
  26. Observable.forkJoin with a for loop
  27. How to detect firestore connection failure
  28. What does this javascript syntax mean ? (0, _parseKey2.default)(something) [duplicate]
  29. How to dynamically import SVG and render it inline
  30. iframe inside angular2 component, Property ‘contentWindow’ does not exist on type ‘HTMLElement’

Leave a Comment