Cannot load third-party AngularJS modules

If you’re encountering issues loading third-party AngularJS modules, it usually means AngularJS is unable to recognize or register the module correctly. Let’s break it down step by step.

---

1. Common Causes of This Issue

Cause	Explanation
Module not installed	The third-party module is missing or not installed correctly.
Incorrect script order	The module script is loaded after app.js, causing errors.
Module name mismatch	The name used in angular.module() does not match the actual module name.
Dependency not injected properly	The module is not included in the app’s dependency list.
CDN or file path incorrect	The script is pointing to a wrong or inaccessible location.
AngularJS not loaded before the module	If AngularJS itself is missing or not loaded first, modules will fail to register.

---

2. Step-by-Step Fixes

Fix 1: Check If the Module Is Installed

If you’re using a CDN, check if the module is correctly referenced in your HTML file.

Example of loading AngularJS and a third-party module correctly:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app.js"></script>

If using a local file, ensure it’s present in the correct directory:

<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="app.js"></script>

Then, verify that angular-ui-router.min.js exists in js/.

---

Fix 2: Verify the Module Name in angular.module()

AngularJS module names must match exactly with what the third-party library provides.

Incorrect (Module name mismatch):

var app = angular.module('myApp', ['uiRouter']); //  Wrong module name

Correct (Use exact module name):

var app = angular.module('myApp', ['ui.router']); //  Correct module name

To check available module names in DevTools Console, type:

console.log(angular.module('myApp').requires);

This lists all loaded dependencies.

---

Fix 3: Ensure the Module Is Included in Dependencies

Every third-party module must be injected into your app.

Incorrect (Missing Dependency Injection):

var app = angular.module('myApp', []); //  'ui.router' not included

Correct (Include Required Modules):

var app = angular.module('myApp', ['ui.router']);

---

Fix 4: Check Script Loading Order

Ensure AngularJS and third-party modules load before app.js.

Incorrect Order (App.js Before Module):

<script src="app.js"></script> <!--  App.js runs before third-party modules -->
<script src="angular-ui-router.min.js"></script>

Correct Order (Modules Before App.js):

<script src="angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
<script src="app.js"></script>

---

Fix 5: Check for JavaScript Errors

If there’s an error before AngularJS loads, modules won’t initialize.

Steps to Debug:

1. Open Chrome DevTools (F12) → Console.
2. Look for errors like:
   • $injector:modulerr (Module Load Error)
   • $injector:nomod (Module Not Found)
3. Fix the underlying errors before proceeding.

---

Fix 6: Verify Installation for npm/bower Users

If using npm or bower, ensure the module is installed.

For npm users:

npm install angular-ui-router

Then, include it in your project:

<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>

For Bower users:

bower install angular-ui-router

Then, reference:

<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>

---

Fix 7: Check the angular Object in DevTools

If AngularJS itself isn’t loading, third-party modules will not work.

1. Open Chrome DevTools (F12).
2. Type: console.log(window.angular);
   • If it returns "undefined", AngularJS isn’t loaded.
   • If angular.module is missing, the library might be overridden.

---

3. Debugging Checklist

Fix	Check
Check if the module is installed	Ensure it’s available via CDN or local file
Ensure AngularJS loads first	<script src="angular.min.js"></script> before third-party modules
Check module name spelling	Verify in DevTools: console.log(angular.module('myApp').requires);
Ensure module is added in angular.module	angular.module('myApp', ['ui.router'])
Check script loading order	Load angular.min.js → third-party.js → app.js
Look for JavaScript errors	Open DevTools Console (F12) and check for errors
Ensure proper npm/bower installation	Run npm install <module> and check node_modules/