Encountering an error due to an unidentified provider for a resolved value

I am currently working on a basic Router setup:

    .when('/login/:id', {
            templateUrl: 'views/login.html',
            controller: 'RoomLoginCtrl',
            resolve: {
              roomData: function($route, ServerService) {
                var id = $route.current.params.id;
                return ServerService.getRoomData(id); //returns promise
              }
            }
          })
....

Here is the code for the associated controller:

(function(angular) {
  angular.module('app')
    .controller('RoomLoginCtrl', RoomLoginCtrl);

  function RoomLoginCtrl($location, DataService, roomData) {
    var vm  = this;
    vm.$location = $location;
    vm.DataService = DataService;
    vm.roomData = roomData;
    vm.userName = "";
  }
})(angular);

I recently encountered an error that reads:

Error: [$injector:unpr] Unknown provider: roomNameProvider <- roomName <- RoomLoginCtrl

It's confusing because when I check while debugging, roomData does have the resolved value. The application crashes later on without any specific operation triggering it (as far as I can tell).

Any insights on why this issue might be happening?

Thank you!

Answer №1

After combining suggestions from both @micha and @New Dev, I was able to resolve the issue by following these steps:

I included controllerAs: 'vm':

.when('/login/:uuid', {
            templateUrl: 'views/login.html',
            controller: 'RoomLoginCtrl',
            controllerAs: 'vm'
            resolve: {
              roomName: function($route, ServerService) {
                var uuid = $route.current.params.uuid;
                return ServerService.getRoomName(uuid); //returns promise
              }
            }
})

I also eliminated

ng-controller="RoomLoginCtrl as vm"
from the templateUrl tag:
Changed this:

<div ng-controller="RoomLoginCtrl as vm">

To this:

<div>

Appreciate the assistance provided!

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

Setting the maximum length value in HTML dynamically

There is an input field with specific formatting restrictions, such as a maximum length of 6 characters and only accepting numeric values. On blur event, the 6-digit code "123456" is automatically formatted to "12-34-56" and the browser remembers this form ...

Include the jquery library and embed a Google Map

Hello, I am using jQuery load to refresh my page every second. The problem arises when I add a Google Map to the page - the map appears and disappears every second. Is there a way to fix this issue? $(document).ready(function(){ <?php if( ...

Tips for updating an anchor link within a Textarea using jQuery

I have a simple inquiry about jQuery. I am interested in changing the "a" tag within a Textarea. I understand that "a" tags do not work within a textarea, which makes it impossible to target them with jQuery selectors. For example: <textarea><a ...

Exploring JSON data with Angular

I am struggling with searching JSON data using Angular. After following various tutorials online, I am now facing an issue where the JavaScript debugger in Chrome shows that the script is running but nothing is being displayed on the page. As a beginner, ...

Allowing cross-origin requests in the REST API server of a MEAN.js application

My current project involves creating a server-side API based on the latest version of MeanJS.org (0.4.0). So far, I have successfully implemented the MEN part and created an endpoint at http://localhost:3000/api. For the frontend, I developed an AngularJS ...

An alternative method for storing data in HTML that is more effective than using hidden fields

I'm trying to figure out if there's a more efficient method for storing data within HTML content. Currently, I have some values stored in my HTML file using hidden fields that are generated by code behind. HTML: <input type="hidden" id="hid1 ...

Using Vue.js to apply highlighting to a new object within a JavaScript array in an HTML document

I have a table displaying a list of items, and I want to highlight any new item added to the collection for 1 second to draw the user's attention. How can I modify the background color of the newly added object in a .vue file? Below is the code snipp ...

Unable to display a recursive component with Vue3 CDN

I am currently working on a project using Vue3 CDN because the project environment cannot run npm. I have been trying to create a component with html+CDN, but when attempting to create a recursive component, it only renders the top-level element. Is there ...

When the div tag exceeds its boundaries, apply a new class

I am working on a div with set dimensions, and I am populating it with content using ng-repeat. My goal is to apply a CSS class to this div when it exceeds its limits. I attempted to use the length property but without success. var app = angular.module( ...

Is it possible in Yii to send an HTTP error response in JSON format rather than HTML/XML?

In the event that a user is trying to access the REST api without appropriate credentials, my yii application will generate a 401 error in the controller.php file like so: throw new UnauthorizedHttpException('Access unavailable without access_token.& ...

Is it possible for me to perform cross-site scripting using JavaScript within my personal browser, specifically Firefox?

While watching a Video Tutorial on a certain website, I noticed that the videos were hosted on platform.thinkific.com and displayed in a light theme. However, I prefer Dark Theme, so I decided to invert the color of the video using the filter: invert(90%) ...

Error encountered in 11ty: Invalid operation - eleventyConfig.addPassthroughCopy is not a recognized function

Attempting to integrate my CSS and JavaScript codes into 11ty has been a bit challenging for me. I recently discovered that 11ty utilizes something called .11ty.js, so I decided to utilize the addPassthroughCopy() function. Below is the script I tried: mo ...

Cannot get the before-leave transition JavaScript hook to function properly in Vue.js

I am facing an issue with my variable, transitionName, in the beforeLeaveHook function. Despite attempting to change it to 'left', the value remains stuck at 'right'. Any assistance on resolving this matter would be greatly appreciated. ...

Observing ng-model within various nested ng-repeat loops

Here is a snippet of code that I am struggling with: <div ng-repeat="category in categories"> <div ng-repeat="(key, value) in category"> {{ key + ":"}} <select id={{key}} class="my_select" ...

Refresh the image source using the AJAX success callback

Previously, I was updating Label values within the AJAX success function as shown below. Now, I am looking for a way to use the same method to change or update the "src" attribute of an <img id="myimage" src=""/> $.ajax({ url: 'clmcontrol_l ...

Issue with React component not updating

Experiencing an issue in a React code related to nested components within React. Link to code The problem arises from having a parent component called "testing" with two child components, Component1 and Component2, each with Component3 as a sub-child und ...

Utilizing Node.js Express to connect an EJS template to a JavaScript file

Currently, I am working on a Nodejs/Express project where my view is constructed using an ejs file. A few JavaScript functions are being utilized in the project and when they are placed inside the script tag within the ejs file, everything seems to run smo ...

Adding custom styles to Material-UI components

` import React, { Component } from 'react'; import Header from './Components/UI/header'; import { Box, Paper } from '@material-ui/core'; import { ThemeProvider, withStyles} from '@material-ui/core/styles'; const ...

There seems to be a problem with the text-to-speech API: It looks like there's a ReferenceError stating that

Currently, I am developing a program using the Quasar framework which is based on Vue and can be compiled for mobile using Cordova. However, I am encountering some issues when trying to run it on mobile. Below is the function causing problems: activat ...

Iterate through the loop to add data to the table

Looking for a way to append table data stored in local storage, I attempted to use a loop to add cells while changing the numbers based on row counts. Here is my JavaScript code snippet: $(function() { $("#loadTask").change(function() { var ta ...