I'm trying to call a function in a .js file from an Angular ponent, but I get the error "ERROR ReferenceError: myTest is not defined at TechnologiesComponent.onClick".

I have followed the steps described here, so I have created a file called custom.js in my src folder.

The file contains the following:

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

$(function() {
  alert('Hello, custom js');
});

I have added the script in the scripts array in my angular.json, like so:

        "tsConfig": "tsconfig.app.json",
        "aot": false,
        "assets": [
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": ["src/custom.js"]
      },

The .ts file where I want to use the .js file looks like this:

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

declare const myTest: any;

@Component({
  selector: 'app-technologies',
  templateUrl: './technologiesponent.html',
  styleUrls: ['./technologiesponent.css']
})
export class TechnologiesComponent {
  onClick() {
    myTest();
  }
}

A button is added to my template: Click Me

When the button is pressed, the error "ERROR ReferenceError: myTest is not defined at TechnologiesComponent.onClick" is thrown. Why?

I'm trying to call a function in a .js file from an Angular ponent, but I get the error "ERROR ReferenceError: myTest is not defined at TechnologiesComponent.onClick".

I have followed the steps described here, so I have created a file called custom.js in my src folder.

The file contains the following:

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

$(function() {
  alert('Hello, custom js');
});

I have added the script in the scripts array in my angular.json, like so:

        "tsConfig": "tsconfig.app.json",
        "aot": false,
        "assets": [
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": ["src/custom.js"]
      },

The .ts file where I want to use the .js file looks like this:

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

declare const myTest: any;

@Component({
  selector: 'app-technologies',
  templateUrl: './technologies.ponent.html',
  styleUrls: ['./technologies.ponent.css']
})
export class TechnologiesComponent {
  onClick() {
    myTest();
  }
}

A button is added to my template: Click Me

When the button is pressed, the error "ERROR ReferenceError: myTest is not defined at TechnologiesComponent.onClick" is thrown. Why?

• javascript
• angular

• I don't know how this declare const myTest: any; will you the reference of custom.js? Have you forgot to use import? for ex: stackoverflow./questions/44817349/… – Prashant Pimpale Commented Dec 20, 2019 at 8:53

3 Answers 3

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

custom.js

myTest = function(){
   alert('Wele 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

I am using angular 10 and trying to access plane js file and It's not allow to change js file i.e. can't able to add export in it

1. add your js files in angular.json

2. I want to access print() function in angular from myJs.js and which is like

// MyJS.js

function print(a){
cosole.log(a +" Code from JS");
}

3. app.ponent.ts

import {Component} from '@angular/core';
  
 // following variable name and function name in js file should be same
declare var print: any;

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

  onClick() {
   print('Yes');
  }
}

4. and fire ng serve again

( If still not work for you then try to put your js file in assets folder and change the path in angular.json)

If you want to use code from .js files in .ts files you should use export and import. Example with your project:

custom.js

export function myTest() {
  alert('Wele to custom js');
}

app.ponent.ts

import {Component} from '@angular/core';
import * as custom from 'src/custom.js';

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

  onClick() {
    custom.myTest();
  }
}

take note of line import * as custom from 'src/custom.js'; It's one of the best ways to import smth from non-ts files.

Structure: