Angular 2: Import External Js File into Component

Angular 2: import external js file into component

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 '../../../../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"/>

Using external js file in angular 6 component

I made a demo: https://codesandbox.io/s/4jw6rk1j1x , like so:

testfile.js

function testa() {}
testa.prototype.testMethod = function testMethod() {
  console.log("hello");
};
var testmodule = new testa();

export { testmodule };

And in the main.ts

import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";

import { testmodule } from "./testfile";

testmodule.testMethod();

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.log(err));

You can see on the console tab the 'hello' text

Note that I made some changes in the testfile.js

How to access external javascript file from angular 2 component

A simple way to include custom javascript functions in your Angular 4 project is to include the item in your assets folder, and then use require to import it into your component typescript.

src/assets/example.js

export function test() {
    console.log('test');
}

src/app/app.component.ts

(before @Component(...))

declare var require: any;
const example = require('../assets/example');

(inside export class AppComponent implements OnInit { ...)

ngOnInit() {
  example.test();
}

How can I add external JS file in Angular CLI component, specific to the component only?

You can try

import * as test from 'test.js';

export class HomeComponent {
    ngOnInit() {
       test.testFunction(); //testFunction is in home.js
   }
}

// test.js
export function testFunction() {
    console.log('hello world');
}

Please refer to this answer: Angular 2: import external js file into component

Angular 2 : external js file variables are accessible from component

please add your script in angular-cli.json as a global script.

 "scripts": [
"../external.js",
"../node_modules/.....min.js",
"../node_modules/jspdf-autotable/dist/....js"
],

let know if it helps.
Here is the reference link: https://github.com/angular/angular-cli/wiki/stories-global-scripts

How to add an external JavaScript file to an Angular app?

Works with following code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'app';
  loadScript(url) {
    const body = <HTMLDivElement> document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }

  ngOnInit() {
    this.loadScript('../assets/scripts/index.js');
  }

}

External .js file in an Angular 8 project

declare your function as a variable (in JS both are same)

custom.js

myTest = function(){
   alert('Welcome to custom js');
}

also, verify if the script is getting imported in the final build

you may need to re-build if you are using ng serve

---

Related Topics