Uncaught ReferenceError: Angular is not defined

Last Updated : 28 Sep, 2022

In this article, we will see the “Uncaught ReferenceError: Angular is not defined”, along with knowing a possible way to resolve it. The ReferenceError object depicts an error that arises when the variable is not initialized yet or simply, the variable doesn’t exist in the current scope & is referenced.

This error might arise due to the angular reference is not correct in the HTML code, i.e., we need to check for the angular reference in the HTML document, along with checking the reference to the .js file in your index.html file. Angular not defined pretty much means that the library is not loaded properly from the server.

We will understand the concept through the below illustrations.

Example: This example describes getting the “Uncaught ReferenceError” where the Angular is not recognized.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width,  
                   initial-scale=1.0" /> 
    <title>Uncaught ReferenceError in Angular</title> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3> 
        Uncaught ReferenceError: Angular is not defined 
    </h3> 
    <script> 
        var app = angular 
            .module("App", []) 
            .config(function ($routeProvider,  
            $locationProvider) { 
                $routeProvider.when("/location", { 
                    templateUrl: "template.html", 
                    controller: SomeControl, 
                }); 
  
                // Configure HTML5 to get links 
                // working on jsfiddle 
                $locationProvider.html5Mode(true); 
            }); 
  
        app.controller("SomeControl"); 
    </script> 
</body> 
  
</html> 

Output:

Uncaught ReferenceError

To solve this error, we simply add the below CDN link inside the head section of the index.html file:

<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>

Example: In this example, we simply insert the required CDN link inside the <script> tag in the <head> tag.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width,  
                   initial-scale=1.0" /> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </script> 
  
    <title>Uncaught ReferenceError in Angular</title> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3> 
        Uncaught ReferenceError: Angular is not defined 
    </h3> 
    <script> 
        var app = angular 
            .module("App", []) 
            .config(function ($routeProvider,  
            $locationProvider) { 
                $routeProvider.when("/location", { 
                    templateUrl: "template.html", 
                    controller: SomeControl, 
                }); 
  
                // Configure HTML5 to get links 
                // working on jsfiddle 
                $locationProvider.html5Mode(true); 
            }); 
  
        app.controller("SomeControl"); 
    </script> 
</body> 
  
</html> 