Adding JavaScript File to Angular 4 Component

Question

Let's just say I make a custom JavaScript file ie 'custom.js'

How would I implement this into a Component?

If I add 'custom.js' to index.html, that's fine but is there any way I can add it specifically to the component?

animation, ect. For example, moving around a navigation bar, ect — Eddie Taliaferro II, Dec 01 '17 at 19:00
Can't you just `import` from inside your component definition? Although, I guess that would require it to be a module. Is it possible to change your custom.js into a module? — mhodges, Dec 01 '17 at 19:08
Can you show how your .js looks like and where you have kept it in your project? — Mahi, Dec 01 '17 at 19:44

score 6 · Accepted Answer · answered Feb 20 '18 at 06:54

Step: 1=> Create and write your js code say "synapse.js" in /app folder. The function or constant which you to use in a component should be exported using export keyword. for ex:

synapse.js

export function synapseThrow() {
  return 'hello'
}

export const MY_VAR = 'world!';

Step: 2=> in angular-cli.json, add the below part in apps object.

"scripts": ["app/synapse.js"]

Step: 3=> in tsconfig.json, add the below property in compilerOptions.

"allowJs": true

Step: 4=> in any component say in "app.component.ts" import the "synapse.js" file using import keyword.

app.component.ts

// other imports

import { MY_VAR, synapseThrow } from './synapse';

// other app code here

ngOnInit(){
  const returned = MY_VAR;
  const returnFunc = synapseThrow();
}

score 1 · Answer 2 · answered Jan 13 '19 at 13:44

Try this way:

Put js file in path: assets/js/custom.js
Code your component

ts file

export class MyComponent implements AfterViewChecked {
  constructor(private elementRef: ElementRef) {

  }
  ngAfterViewChecked() {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "../assets/js/custom.js";
    this.elementRef.nativeElement.appendChild(s);
  }
}

score 0 · Answer 3 · answered Dec 01 '17 at 19:21

Try declaring a variable that you have inside of your custom.js file

declare var aFunction: any;

import '../../../js/custom.js';

export class ExampleComponent{

    variable: any;

    constructor() { }

    ngOnInit() { 
       new aFunction(this.variable);  //aFunction() is inside custom.js
    }
}

Adding JavaScript File to Angular 4 Component

3 Answers3

Linked