This error occurs when angular is undefined, meaning AngularJS is not loaded or improperly referenced. Let’s break down the possible causes and fixes.
1. Common Causes of This Error
| Cause | Explanation |
|---|---|
| AngularJS is missing | The script file (angular.min.js) is not loaded. |
| Incorrect script order | app.js is executing before AngularJS is loaded. |
angular is overridden | Some script or variable might be overriding the angular object. |
| AngularJS is in a different scope | If AngularJS is loaded in a different context, angular might not be available. |
| JavaScript errors | A syntax error before AngularJS loads can stop execution. |
2. Step-by-Step Fixes
Fix 1: Ensure AngularJS is Loaded
Check if the AngularJS script is included in your HTML file.
Incorrect (Missing AngularJS File):
<script src="app.js"></script> <!-- app.js runs before AngularJS -->
<script src="angular.min.js"></script> <!-- Wrong order -->
Correct (Load Angular First):
<script src="angular.min.js"></script> <!-- Load Angular first -->
<script src="app.js"></script> <!-- Then load your script -->
Fix 2: Verify AngularJS is Defined
Open Chrome DevTools Console (F12) and type:
console.log(typeof angular);
- If it returns
"undefined", AngularJS is not loaded. - If it returns
"object", AngularJS is loaded correctly.
Fix 3: Use a CDN or Local AngularJS File
If you’re using a CDN, make sure it’s accessible:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
If using a local file, confirm the correct path:
<script src="js/angular.min.js"></script>
Then, confirm that angular.min.js actually exists in js/.
Fix 4: Wrap Code in window.onload
If app.js executes before AngularJS is ready, delay execution.
Incorrect (Executed Before AngularJS Loads):
var app = angular.module('myApp', []); // Throws error if AngularJS is not loaded
Correct (Wait for the DOM to Load):
window.onload = function () {
var app = angular.module('myApp', []);
};
Fix 5: Use defer and async Properly
If loading scripts asynchronously, ensure AngularJS loads first.
Incorrect (Scripts Load in Any Order):
<script src="angular.min.js" async></script>
<script src="app.js" async></script> <!-- Order not guaranteed -->
Correct (Use defer to Maintain Order):
<script src="angular.min.js" defer></script>
<script src="app.js" defer></script>
Why?
asyncloads scripts independently, breaking dependencies.deferloads scripts in order, keeping AngularJS first.
Fix 6: Ensure ng-app is Set Correctly
If ng-app is missing or misspelled, AngularJS might not initialize.
Incorrect (Missing ng-app):
<html>
<head>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div>
{{ message }} <!-- AngularJS not initialized -->
</div>
</body>
</html>
Correct (ng-app Properly Set):
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainController">
{{ message }} <!-- Will now work -->
</div>
</body>
</html>
Fix 7: Debug the angular Object
If AngularJS seems loaded but still causes errors, check:
console.log(window.angular);
- If
window.angularisundefined, AngularJS didn’t load. - If
window.angular.moduleisundefined, something overwrote AngularJS.
Check if another script is conflicting:
console.log(Object.keys(window));
Look for conflicting libraries that might redefine angular.
Fix 8: Check for JavaScript Errors
If there’s a syntax error before AngularJS loads, it might not execute.
Check in Chrome DevTools (F12):
- Open the Console tab.
- Look for red errors.
- Fix any syntax errors that might stop execution.
3. Final Debugging Checklist
| Fix | Check |
|---|---|
| Load AngularJS first | <script src="angular.min.js"></script> before app.js |
| Check Console | Type console.log(typeof angular) in DevTools |
| Use Defer | <script defer> instead of <script async> |
| Ensure ng-app is set | <html ng-app="myApp"> in HTML |
| Check script paths | Verify angular.min.js exists at the correct location |
| Look for Conflicts | Use console.log(Object.keys(window)) to check if angular is overridden |
| Fix JavaScript Errors | Open Chrome DevTools and fix errors |