Handling common AngularJS errors and debugging them

When working with AngularJS, you may encounter common errors related to scope, dependency injection, digest cycle issues, and HTTP requests. This guide will help you understand, debug, and fix these errors effectively.

---

1. Unknown Provider Error ($injector:unpr)

Error Message:

Error: [$injector:unpr] Unknown provider: myServiceProvider <- myService

Cause:

• Missing dependency injection
• Incorrect service or factory registration

Solution:

Make sure to define the service correctly:

app.service('myService', function() {
    this.sayHello = function() {
        return "Hello!";
    };
});

Inject it properly into a controller:

app.controller('MainCtrl', function($scope, myService) {
    $scope.message = myService.sayHello();
});

---

2. Digest Already in Progress Error ($rootScope:inprog)

Error Message:

Error: [$rootScope:inprog] $digest already in progress

Cause:

• Calling $digest() manually inside an active digest cycle
• Nested $apply() calls

Solution:

Use $applyAsync() instead:

$scope.$applyAsync(function() {
    $scope.message = "Updated!";
});

---

3. Cannot Read Property of Undefined (TypeError)

Error Message:

TypeError: Cannot read property 'name' of undefined

Cause:

• Trying to access an undefined object or property

Solution:

Use safe navigation (?) or ng-if to check for the object:

<p ng-if="user">User Name: {{ user.name }}</p>

Or initialize the object in the controller:

$scope.user = { name: "John Doe" };

---

4. 10 $digest() iterations reached Error ($rootScope:infdig)

Error Message:

Error: [$rootScope:infdig] 10 $digest() iterations reached

Cause:

• Infinite loop in two-way binding
• Expression modifying a value each digest cycle

Solution:

Use $timeout() instead of direct scope modification:

$timeout(function() {
    $scope.count++;
}, 0);

---

5. Cross-Origin Request Blocked (CORS Error)

Error Message:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Cause:

• API does not allow cross-origin requests

Solution:

• Enable CORS headers on the server
• Use a proxy server
• For development, use Chrome with --disable-web-security

---

6. $http Response Not Being Updated in UI

Cause:

• UI not updating because of missing $apply()

Solution:

Manually trigger a digest cycle:

$http.get('/api/data').then(function(response) {
    $scope.data = response.data;
    $scope.$apply(); // Ensure UI updates
});

Or use $timeout():

$timeout(function() {
    $scope.data = response.data;
});

---

7. $watch and Performance Issues

Cause:

• Too many $watch expressions slowing down the app

Solution:

Use one-time binding (::) for static data:

<h1>{{ ::user.name }}</h1>

---

8. ngRepeat Performance Issues

Cause:

• Rendering a large list without optimization

Solution:

Use track by in ng-repeat:

<li ng-repeat="item in items track by item.id">{{ item.name }}</li>

---

9. Debugging with Chrome DevTools

A. Inspect Scope Variables

1. Open DevTools (F12)
2. Select an element
3. Run in console: jsCopyEditangular.element($0).scope()

B. Check API Calls in the Network Tab

1. Go to Network → XHR
2. Inspect API responses for errors

---

10. General Debugging Tips

✔ Use console.log() to debug variables
✔ Use breakpoints in Chrome DevTools
✔ Monitor $digest() performance
✔ Check API responses in Network Tab