AngularJS is throwing an error because it cannot find the provider when using a factory with resolve

I am encountering an error whenever I attempt to download data using a factory method. The factory function is invoked under resolve in app.js

app.js

.state('app.settings', {
                url: '/settings',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/settings.html',
                        resolve: {
                            profileData: function (ProfileFactory) {
                                return ProfileFactory.getProfile();
                            }
                        },
                        controller: 'ProfileCtrl'
                    }
                }
            })

Factory.Js

.factory('ProfileFactory', ['$q', '$http', 'localstorage', 'loginSharedData', 'Base64', function ($q, $http, localstorage, loginSharedData, Base64) {
        var urlBase = 'http://localhost/snc/Service.Svc/';
        var profileData = {};
        var deferred = $q.defer();
        var promise = deferred.promise;

        var _postData = {
            "apiKey": Base64.decode(localstorage.get('secureToken')),
            "userId": Base64.decode(loginSharedData.userid)
        };

        profileData.getProfile = function() {
            console.log('inside get profile service');
            $http({
                method: 'POST',
                url: urlBase + 'GetUserProfile',
                data: JSON.stringify(_postData),
                contentType: 'application/json',
                dataType: "json"
            }).then(function (response) {
                deferred.resolve(response.data.GetUserProfileResult);
            }, function () {
                deferred.reject('Failed to get profile');
            });

            promise.success = function (fn) {
                promise.then(fn);
                return promise;
            }
            promise.error = function (fn) {
                promise.then(null, fn);
                return promise;
            }
            return promise;
        }
        return profileData;
    }])

Controllers.js

.controller('ProfileCtrl', ['$scope', 'Base64', 'profileData', function ($scope, Base64, profileData) {
        $scope.profile={};

        if(profileData.status) {
            $scope.profile.email = Base64.decode(profileData.email);
            $scope.profile.fullname = Base64.decode(profileData.full_name);
            $scope.profile.username = Base64.decode(profileData.user_name);
            $scope.profile.emailstatus = profileData.email_status;
        }
        console.log($scope.profile);
    }]);

The Error:

Error: [$injector:unpr] Unknown provider: profileDataProvider <- profileData <- ProfileCtrl
http://errors.angularjs.org/1.3.13/$injector/unpr?p0=profileDataProvider%20%3C-%20profileData%20%3C-%20ProfileCtrl
minErr/<@http://localhost:63342/SNC/www/lib/ionic/js/ionic.bundle.js:8890:12
createInjector/providerCache.$injector<@http://localhost:63342/SNC/www/lib/ionic/js/ionic.bundle.js:12824:19
getService@http://localhost:63342/SNC/www/lib/ionic/js/ionic.bundle.js:12971:39
...

Despite successfully retrieving the data from the service and logging it in the console, this error occurs once the download process completes. Finding the cause of this issue has proven challenging.

Answer №1

Pointed out earlier by Experienced dev:

Chances are there's a ng-controller="ProfileCtrl" somewhere in your code, leading to a duplicate instantiation of ProfileCtrl outside of the state's "resolve". Make sure to inspect templates/dashboard.html - that might be the culprit.

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

When trying to use routes with the .map() function, it does not seem

I am currently working on developing a multi-page web application using react-router-dom. However, I have encountered an issue with the user list page (userlist.js) where the data inside the .map() function is not being returned. Interestingly, the code pr ...

Enable search functionality for jQuery Select2 values that have been formatted by a formatter function

Trying to use a formatter with select2 for better alignment of code and description elements, but the plugin seems to be searching based only on the description rather than the entire text. This may be because it's only looking at the original <opt ...

What is the best way to capture and store the chosen text in a Kendo multiselect variable?

I recently transformed the kendo dropdownlist into a kendo multiselect. The dropdownlist now has 2 items: D-UDMS-TMA Data Mgmt System U-TDMS-SMA Mgmt System $("#btnSendFlow").click(function () { debugger; var FlowData_array = ...

Error encountered due to a circular reference in the dependency library

Whenever I attempt to run my application, I encounter the following error: > npm start Starting the development server... ts-loader: Using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42363b32273121302b323602716c776c71"& ...

Incorporating AngularJS Controller to Render Asp.Net MVC 5 View

I am attempting to navigate to the Home page once a user successfully logs in. My current tech stack includes ASP.NET MVC 5, AngularJS, EntityFramework 6, Bootstrap, and repository pattern. Below is the code snippet from my LoginController: public JsonRes ...

Updating a component from a different source

As a newcomer to React, I'm curious about the ability to update one component's content based on events from another component. I have two React components set up. The first component loads data when the page initializes, while the second compon ...

verifying an email address through firebase using the verifyPasswordResetCode method

Currently in the process of setting up firebase authentication. Instead of relying on firebase's default pages for recovery password and email verification, I want to handle these processes directly on my website. To customize the recovery steps: U ...

Is there a way to access various history.pushState events when using window.popState in JavaScript?

In my code, there are two pushStates that I need to read separately and execute different functions for. However, when the form is not submitted, the related pushState does not trigger and results in this error: Uncaught TypeError: Cannot read property &ap ...

What is the best way to obtain the current date in JavaScript in the format Mon-DD-YYYY?

Need help with getting the current date in Mon-DD-YYY format using JavaScript. I want to input today's date without the time into a date picker field. My current code is giving errors, below is what I have: Page.prototype.clickOnsessionDate = async f ...

Grunt encounters a hurdle as it attempts to construct the tasks hierarchy for the ng-grid project within Webstorm on a Windows 2012

Having trouble setting up ng-grid project in WebStorm on Windows 2012. I have double-checked NPM and Grunt references. Here are my current Grunt references: Node interpreter: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7&b ...

Is it possible to have a never-ending slideshow with inline-blocks?

After spending countless hours trying to troubleshoot my code, I am now seeking help from the wonderful people of the internet! ;) It seems like only a small portion of my code is incorrect. What I'm attempting to do is move the leftmost object in the ...

Encountering an error saying "Cannot read property 'x' of null when using Google Charts LineChart"

When I hover over the legend labels on my Google chart, I keep getting an error message that says "Cannot read property 'x' of null," and I'm not sure why. The data is all in JSON format from an AJAX GET request and does not contain any nul ...

"Converting the initial row of a CSV file into the header section of

I have been trying to create a table using ajax but I am facing difficulty in enclosing the <th> elements inside the <tr id="header">. I have tried using methods like appendTo and prependTo but it hasn't worked for me. The desired structu ...

The Bootstrap alert refuses to close when the close button is clicked

I'm attempting to utilize a Bootstrap alert for displaying a warning. The alert automatically fades and dismisses after a period of time, but I want to provide the user with the option to manually close it. I've included jQuery and js/bootstrap.m ...

Strangely unusual issues with text input boxes

So I've set up two textareas with the intention of having whatever is typed in one appear simultaneously in the other. But despite my best efforts, it's not working as expected. Here's the code snippet: <script> function copyText () { ...

The ng-submit() directive in Angular does not trigger submission when the "Enter" key is pressed in a text field

I have created a basic form using Angular where I want the ng-click function (updateMsg({name: name,room: room})) to be triggered when the user enters a value and then presses enter key. Unfortunately, the current code does not work as expected. The funct ...

What could be causing the parameters to be empty in Next.js static site generation with getStaticProps?

Introduction I am currently in the process of developing an application using next.js, specifically utilizing its static site generation feature. Despite following various examples and documentation for hours, I am encountering an issue where the params o ...

What is the best way to apply CSS styles to a child div element in Next.js?

I'm currently working on enhancing the menu bar for a website project. Utilizing nextjs for my application I am aiming to customize the look of the anchor tag, however, encountering some issues with it not rendering correctly. Here is a snippet of ...

A guide to securely retrieving data from the Hono API endpoint using type safety within a Next.js application

Currently, I am using Hono as my API endpoint with Bun. Now, I am working on a new app with Next.js and I want to ensure type safety when fetching data from my API. I believe I can accomplish this through RPC. However, I am unable to locate AppType mention ...

Receiving accolades within a nested function while implementing a Higher Order Component

I'm currently working on creating a Higher Order Component (HOC) to manage some functionalities in React. Here is my implementation: import React, { useState } from "react"; export default function withFormControl(WrappedComponent) { return props ...