External .js file in an Angular 8 project

Question

I'm trying to call a function in a .js file from an Angular component, 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('Welcome 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.component.html',
  styleUrls: ['./technologies.component.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 don't know how this `declare const myTest: any;` will you the reference of `custom.js`? Have you forgot to use `import`? for ex: https://stackoverflow.com/questions/44817349/how-do-i-include-a-javascript-script-file-in-angular-and-call-a-function-from-th — Prashant Pimpale, Dec 20 '19 at 08:53

score 2 · Accepted Answer · answered Dec 20 '19 at 08:41

2

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

custom.js

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

answered Dec 20 '19 at 08:41

Jeba Prince

1,669
4
22
41

Declaring functions as variables isn't really an option, since I'm going to import a large, third party library. The custom.js was just to have a MWE. But i was using ng serve, and simply rebuilding solved my problem. Thanks :) – Daniel Hjertholm Dec 20 '19 at 09:21
good that i added that extra line which helped you, we all got stuck in same situation :) – Jeba Prince Dec 20 '19 at 09:38

score 1 · Answer 2 · answered Dec 20 '19 at 08:57

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('Welcome to custom js');
}

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.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:

After upgrading to angular 8, scripts suddenly stopped loading in our hybrid app for iOS (worked on web/android). After many days of struggle , I tried this and it works. Strange but it worked . Why did you suggest this, when there are other ways to do it ? — Nirmal Kumar, Dec 28 '22 at 11:06

score 1 · Answer 3 · answered May 24 '21 at 13:18

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

add your js files in angular.json

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

app.component.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.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

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

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)

External .js file in an Angular 8 project

3 Answers3