Dealing with errors in Angular using dependency injection

I'm encountering an issue while attempting to inject $ http to the factory. I received the following error in Angular 1.6:

Circular dependency found: $rootScope <- $http <- $exceptionHandler <- $rootScope <- $route

Here is what I have been working on so far:

var app = angular.module("app", []);
app
  .controller("ctrl", function($scope) {
    // controller
  })
  .factory('$exceptionHandler', ['$log', '$http', function($log, $http) {
    return function myExceptionHandler(exception, cause) {
      $log.warn(exception, cause);
      // Only this line is causing the error
      console.log($http);
    }
  }]);

Answer №1

If you are facing a circular dependency issue, there is a workaround that you can implement.

Instead of directly injecting $http into the interceptor, you can inject $injector and utilize it to retrieve $http as needed.

var app = angular.module("app", []);
app.factory('$exceptionHandler', ['$log', '$injector', function($log, $injector) {
    return function myExceptionHandler(exception, cause) {
        var $http = $injector.get('$http');
        $log.warn(exception, cause);
        // With this adjustment, the error should no longer occur
        console.log($http);
    }
}]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for establishing and connecting numerous connections among current nodes using the same criteria

While browsing StackOverflow, I came across similar questions. However, I believe this one has a unique twist. The main issue at hand is: How can I establish multiple relationships between existing nodes? I have the following code snippet: session . ...

Deactivate tag Script using JQuery

Is there a way to dynamically remove two <script> tags from a page at the document ready event? Each tag is assigned its own unique id. I attempted to use the following code: $("#idPrimoScript").remove(); $("#idSecondoScript").remove(); However, t ...

Tips for seamlessly embedding Youtube iframes within Angular2 components. Resolving issues with unsafe value errors

ERROR: There seems to be an issue in the ./HomeComponent class HomeComponent - inline template:23:84. It is caused by using an unsafe value in a resource URL context. About my homeData model { id: 1, title: '2017 Super Bowl', graphic: 'ht ...

What is the best way to pass props down to grandchildren components in React?

I'm trying to pass some props from a layout to its children. The issue is, it works fine when the child component is directly nested inside the layout, but it doesn't work when the child component is wrapped in another element like a div. Exampl ...

How to use AngularJS ng-options to retrieve the chosen option from an array that corresponds to another variable in the scope

Does anyone know how to create a dropdown select in AngularJS with default selection based on a dynamic value? $scope.fcFeedTypes = [{"name":"Plain Text","value":"Plain Text"},{"name":"MQ Message","value":"MQ Message"}]; } $scope.feedEditor.ft = "MQ Messa ...

Updating a value using jQuery AJAX techniques

Using jQuery AJAX, I am loading the content of a page in this way: $(document).ready(function(){ $('#next').click(function(event){ $.ajax({ url: "load.php?start="+$('#lastid').text(), success: function(html){ $("#results"). ...

Clearing console logs in webkit: A step-by-step guide

Does anyone know how to clear the console in webkit? I have a function that displays debug data in the console, but it becomes difficult to read due to the number of lines. Is there a simple way to empty the console? When I check the console itself, I onl ...

Clicking on multiple instances of the same Vue.js component (popover) results in displaying identical data

Attempting to display an AJAX response in a popover shown by clicking an icon (a custom Vue component) brings about a challenge. The issue arises when there are multiple instances of this component, dynamically rendered through the v-for directive within a ...

Initiate the Material TextField onChange event from within a nested component

I am currently working on a component that looks like this: class IncrementField extends Component { inputRef; changeValue() { this.inputRef.value = parseInt(this.inputRef.value) + 1; } render() { const { ...other } = this.props; return ( ...

Checking with jQuery Validate: displaying an error message if input matches a certain value

I spent 6 hours trying to figure out a solution to my issue. Currently, I am utilizing the jQuery Validation plugin. In my form, there is a password input field. When an AJAX request detects an incorrect password, another input field is set to a value of ...

Is there a valid substitute for using hot links with images?

Currently, I am instructing a group of individuals on the intricacies of web development with a specific focus on AngularJS. As part of an exercise that I designed for them, they are required to fetch data from the freely accessible pokeapi.co. One interes ...

Show HTML content from different domains within a navigation tab's content area

I am in need of showing content from a different domain on my webpage within a navigation tab. I have followed the example given in the link below: Loading cross domain endpoint with jQuery AJAX This is how my HTML code looks like: <section class=" ...

Transform and command the data acquired through an AJAX request using jQuery

My code includes an AJAX call using jQuery: $('.add a').click(function() { $.ajax({ type: 'POST', url: '/api/fos', context: this, datatype: 'html', success: function(data) ...

Error: The Mui Material Breakpoints Theme Cannot Be Located

Hello there! I'm having some trouble placing my code breakpoints, resulting in an error in the output. Can you help me? import { makeStyles } from "@material-ui/styles"; const useStyle = makeStyles((theme)=>({ LogoLg:{ display:&ap ...

When attempting to access an API hosted on Cloudflare from Heroku, a 403 error is returned

I am currently utilizing the Cowin API () to access available slots. My implementation is based on Node.js. Interestingly, it functions well on my local machine but encounters an error after deployment on Heroku. 2021-05-09T11:07:00.862504+00:00 app[web.1] ...

Dimensions of Bootstrap carousel

I am attempting to create a Bootstrap carousel with full-width images (width: 100%) and a fixed height. However, when I set the width to 100%, the height automatically takes on the same value. I am unsure if the issue lies within my files. <div id="m ...

Using jQuery to animate a form submission in CodeIgniter

I have integrated two jQuery plugins into my application, which are: jQuery validate : . jQuery blockui : http://malsup.com/jquery/block/#download The application is developed using PHP Codeigniter and jQuery. It consists of a form created with the fol ...

I continue to encounter the following error message: A system error occurred while attempting to convert 'AngularTest' into an Angular project

I encountered an issue while attempting to integrate Karma into my Eclipse project. The error occurred during the conversion process to AngularJS: While converting 'AngularTest' to an angular project, I faced the following internal error: loader ...

Discover the steps to convert an image to base64 while circumventing the restrictions of the same-origin policy

I've been struggling to convert an image link to base64 in order to store it on the client-side browser (IndexedDB). Despite searching for a solution for days, I have not been able to find one that addresses my issue. While I can successfully convert ...

Is it acceptable to include the bundled main.js file in the gitignore for a HUGO project?

Is it possible to exclude the bundled main.js file from a HUGO project by adding it to .gitignore? ...