How to add a custom JS file to Angular component

Question

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.

Santhoshkumar Thangavel · Accepted Answer · 2020-08-24 03:28:28Z

1

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

answered Aug 24, 2020 at 3:28

Santhoshkumar Thangavel

321 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Budda Over a year ago

Thanks! This helped to call 'customTestHello1'. Apparently, when the function is defined the way it is, it will be automatically called. Though, I can't understand when exactly it is called? It looks like this happens before the browser to loads DOM. How can I call a specific function from inside of 'ngOnInit'ngOnInit?

mukhtar alam · Accepted Answer · 2020-08-24 08:05:42Z

0

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

answered Aug 24, 2020 at 8:05

mukhtar alam

3233 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to add a custom JS file to Angular component

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related