Angular 8 项目中的外部 .js 文件

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?

Answer 1

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

Answer 2

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:

Answer 3

I am using angular 10 and trying to access plane js file and It's not allow to change js file ie 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.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'); } }

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 )

Answer 4

Find out the answer here https://www.c-sharpcorner.com/article/using-external-js-file-in-angular-app/

Great explanation. Thanks to rohol amin.