How to Include External JavaScript File in Angular Application?

When you are working on an Angular application, there can be a number of reasons to include an external JavaScript file in your project. For example, you might need a third-party library or a framework for some specific need. By including the JavaScript files for these libraries or frameworks, you can access their functions and features within your Angular code.

There could also be situations where you have written some custom JavaScript code that you want to use in multiple parts of your Angular application, you can include the code in a separate JavaScript file and then import it wherever you need it. This can help to keep your code organized and maintainable.

In this article, I will show you different ways to include an external JavaScript file in your Angular application.


Method 1 – By adding the JavaScript file’s path in the angular.json File

The most commonly used method to include an external JavaScript file in an Angular application is to add the path of the JS file in the scripts array of the angular.json file.

Let’s say we have a JS file named hello.js. This file has a sayHello() function which prompts a message to the user whenever it’s called.

hello.js:

// A greeting function
function sayHello(name){
    
    alert(`Hello ${name}!`);
    
}

To use this JS file in your Angular application follow the below steps.

Step 1: Create a folder named js inside the assets directory and put the JavaScript file(hello.js) inside this js folder.

Put the External JavaScript file in assets folder of Angular app

Step 2: Now add the path of the JavaScript file(hello.js) inside the scripts array of the angular.json file.

The scripts array is used to specify a list of JavaScript files that should be included in the build process. These files can be included in the index.html file of the project and will be loaded by the browser when the application is run.

So, add the path of your JS file inside the scripts array of the angular.json file. After this step, you are ready to use your custom JS file.

Put the external JavaScript file in the scripts array of angular.json file

Step 3: Now, open the component where you want to use the functions of the JavaScript file(hello.js).

For example, I want to use the sayHello() function of the hello.js file inside the app.component.ts file. So, first I have to declare it with the same name that I have kept in the custom JS file.

For example, to use the sayHello() function, I have to declare a variable with the same name i.e. sayHello. After declaration, we can use it anywhere inside the app.component.ts file.

After making the changes, serve the application again using the ng serve command. This is a must thing to do. If you don’t reserve the application, you might get undefined errors while using the external JS functions.

In the following example, We have called the sayHello() function of the JS file inside the onBtnClick() function. This will prompt a message to the user whenver the clickMe button is clicked.

app.component.ts

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

// Exnternal JS(hello.js) functions declaration
declare var sayHello:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-basics';

  onBtnClick(){
    // Call the sayHello() function from hello.js file
    sayHello('John Doe');
  }

}

Below is the outcome of the above code:

Output of including an external javascript file in Angular

As you can see, we got an alert message when we clicked the button. It means, the external JavaScript’s function sayHello() is successfully called from our app.component.ts file.

This way you can include any external JavaScript file in your Angular application and use its functions and features wherever you want.


Method 2 – By Importing the JS File into the Index.html file

In Angular, the index.html file is the root HTML file for your application. It’s the first file that gets loaded when someone visits your application in a web browser.

So, if we import the external JavaScript file(hello.js) into our index.html file using the <script> tags, we can access its functions and features anywhere in the application.

Here are the steps that you can follow to include the JS file in your Angular application:

Step 1: Create a new folder named js inside the assets directory and put the external JavaScript file in this folder. This is already discussed in the above example with relevant images.

Step 2: Add the path of the JavaScript file using the <script> tags inside the <head> section of the index.html file.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Basics</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <script src="./assets/js/hello.js"></script>
  
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

Step 3: Open the component where you want to use the functions of the external JavaScript file and declare them at the top of your compoent.ts file. This step is also covered in the first example.

Note: If you are getting errors while calling the functions of the external JavaScript file, make sure that the path of the JS file is correct. If errors are still not gone, you can reserve the application using the ng serve command.


Conclusion

In this article, we learned that there are two ways to include an external JavaScript file in your Angular application. First, by adding the JavaScript file’s path in the scripts array of the angular.json file. The second way is to directly import the JS file in the head section of the index.html file. In both methods, you can achieve the same result.

That’s all for this article.

Happy Coding.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.