CODEWITHSUNDEEP
javascriptangulartypescript
Budda
Budda

Reputation: 18343

How to add a custom JS file to Angular component

I'm trying to learn Angular and as part of learning, I need to add some JS logic to one of my components which is already in a separate JS file. There is an answer to a very similar question (How to add custom js file to angular component like css file). I did as it recommends, but it looks like something is missing. Please help me understand, what did I do wrong?

I created the file custom.js and saved it in the src/assets folder (just trying to see what declaration will work, as I see few different styles):

(function customTestHello1() {
    console.log("customTestHello1: Hello!!!"); 
    alert('customTestHello1: Hello!!!');
})()

function customTestHello2() {
    console.log("customTestHell2: Hello!!!"); 
    alert('customTestHell2: Hello!!!');
}

I included this file in angular.json:

"scripts": [ "src/assets/custom.js" ]

In the ts-file of my component, I added

declare const customTestHello1: any;
declare const customTestHello2: any;

and in the ngOnInit function of the component added call of these functions

  ngOnInit(): void {
    customTestHello1();
    //customTestHello2();
  }

When I opened my page I saw an error in the console:

ERROR ReferenceError: customTestHello1 is not defined
    at MyComponent.ngOnInit (my.component.ts:20)
    at callHook (core.js:3038)
    at callHooks (core.js:3008)
    at executeInitAndCheckHooks (core.js:2960)
    at refreshView (core.js:7186)
    at refreshEmbeddedViews (core.js:8279)
    at refreshView (core.js:7195)
    at refreshComponent (core.js:8325)
    at refreshChildComponents (core.js:6964)
    at refreshView (core.js:7221)

The result is the same even if I uncomment "customTestHello2()".

What do I do wrong? How can I embed JS into an Angular project into a component?

If I put following to my script:

window.initMethod = function() { console.log("customInitMethod: Hello!"); }

this to myComponent.ts:

let initMethod: any;

and call it:

ngOnInit(): void {
    initMethod();
    //customTestHello1();
    //customTestHello2();
  }

I get another error:

core.js:4197 ERROR TypeError: initMethod is not a function at MyComponent.ngOnInit (pingball.component.ts:21) at callHook (core.js:3038) at callHooks (core.js:3008) at executeInitAndCheckHooks (core.js:2960) at refreshView (core.js:7186) at refreshEmbeddedViews (core.js:8279) at refreshView (core.js:7195) at refreshComponent (core.js:8325) at refreshChildComponents (core.js:6964) at refreshView (core.js:7221)

Please advise!

Thanks a lot in advance!

P.S. I would also benefit a lot if you give a good tutorial that does not have an obsolete samples.

Upvotes: 1

Views: 1797

Answers (2)

mukhtar alam
mukhtar alam

Reputation: 323

Create an angular service to call your customTestHello1() method in your component after importing that service in the respective component. Make sure to add service in providers array of module.ts. For service creation details you can refer : https://angular.io/tutorial/toh-pt4

Upvotes: 0

Santhoshkumar Thangavel
Santhoshkumar Thangavel

Reputation: 32

import the custom.js file in the component in which you are going to use.

Upvotes: 1

Related Questions