Adding JavaScript File to Angular 4 Component - Stack Overflow

admin管理员组

文章数量:1324426

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 ponent?

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 ponent?

• javascript
• angular
• typescript

Share Follow edited Dec 1, 2017 at 19:04 Brian 5,05933 gold badges2222 silver badges3030 bronze badges asked Dec 1, 2017 at 18:58 Eddie Taliaferro IIEddie Taliaferro II 18511 gold badge55 silver badges1616 bronze badges 4

• what would this file have? – yBrodsky Commented Dec 1, 2017 at 18:59
• animation, ect. For example, moving around a navigation bar, ect – Eddie Taliaferro II Commented Dec 1, 2017 at 19:00
• Can't you just import from inside your ponent definition? Although, I guess that would require it to be a module. Is it possible to change your custom.js into a module? – mhodges Commented Dec 1, 2017 at 19:08
• Can you show how your .js looks like and where you have kept it in your project? – Manzer A Commented Dec 1, 2017 at 19:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Step: 1=> Create and write your js code say "synapse.js" in /app folder. The function or constant which you to use in a ponent 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 pilerOptions.

"allowJs": true

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

app.ponent.ts

// other imports

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

// other app code here

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

Try this way:

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

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);
  }
}

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 ComponentStack Overflow