Issue with AngularJS models and services regarding injection error

I encountered the following error message:

Unknown provider: UserModelProvider <- UserModel <- PropertyService

The issue arises from injecting the User model into a particular service.

Interestingly, when I inject it into a different service, everything works perfectly fine.

Works =

angular
    .module('app')        
    .service('JunkService', junkService);

junkService.$inject = ['$http', 'UserModel'];

function junkService($http, UserModel) {

Does NOT work =

angular
    .module('app')        
    .service('PropertyService', propertyService);

propertyService.$inject = ['$http', 'UserModel'];

function propertyService($http, UserModel) {

Both Junk and Property services are injected into their respective controllers, functioning in the Junk controller but not in the Property one...

Any insights on this matter?

This is how the Model is structured:

angular
    .module('app')        
    .factory('UserModel', userModel);

function userModel() {    
function User(firstName, lastName, role, organisation) {
        // Public properties, assigned to the instance ('this')
        this.firstName = firstName;
        this.lastName = lastName;
        this.role = role;
        this.organisation = organisation;
    }
return User;
}
})();

Answer №1

Upon reviewing your code, it appears that the <script> tags in your index.html file are not in the correct order. Based on the functionality you described as working and not working, it seems like you currently have:

<script src="../propertyService.js"></script>
<script src="../userModelProvider.js"></script>
<script src="../junkService.js"></script>

The optimal sequence should actually place the userModelProvider (or whichever file contains this) script above any dependent modules for proper loading:

<script src="../userModelProvider.js"></script>
<script src="../propertyService.js"></script>
<script src="../junkService.js"></script>

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

Error TS2322: Cannot assign type 'Promise<Hero | undefined>' to type 'Promise<Hero>'

I am currently studying angular4 using the angular tutorial. Here is a function to retrieve a hero from a service: @Injectable() export class HeroService { getHeroes(): Promise<Hero[]> { return new Promise(resolve => { // ...

Utilizing a font URL imported through a script

I am currently working on incorporating the pdfmake package into my application. In order to load fonts, a list of URLs is required during initialization. However, the fonts I am using are managed by npm and Vite, so they do not have fixed URLs. Here' ...

Error encountered during AJAX request even though the data was successfully updated. The message "Unexpected Token <" was unexpectedly received

I am facing a specific issue with my code and unable to find a solution. The problem arises when I make an AJAX request to send some data to the server for updating the database. Although the data gets updated correctly in the database, I encounter an erro ...

Syntax Error in Node.js for MongoDB: Unexpected token or invalid symbol

I'm having trouble figuring out what's going on. Node v16.4.2, NPM v7.18.1 const mongoose = require("mongoose"); // const dotenv = require('dotenv') require('dotenv').config({path:'variables.env'}); mongoo ...

Angular, JavaScript, and PHP are three powerful programming languages that

This file contains HTML code <ul class="list"> <li id="numword" data-score="{{item.score}}" class="" ng-repeat="item in words track by $index"> {{item.word}} {{item.score}} </li> </ul> Here is the visual representa ...

Comparing two arrays in Javascript to find identical values

I am faced with a challenge involving three arrays. One array contains static values, another array contains dynamic values, and the third array is intended to store values that are present in both of the other arrays. My goal is to iterate through the ar ...

Using React's instance value or state for small updates to the user interface

Whenever I utilize setState in a React Component, I automatically assume that some level of work is being performed to refresh the Component. In the coding community, it seems common practice to store important dynamic variables in the state. Consider thi ...

Execute the function within setInterval only one time

I have a setInterval function that calculates the time difference between a specified date and the current time. Once this difference is less than an hour, I want to execute some code only once. const countdownDate = new Date('March 15, 2021 11:30:00& ...

What is the best way to split an array into smaller chunks?

My JavaScript program fetches this array via ajax every second, but the response time for each request is around 3 to 4 seconds. To address this delay, I attempted to split the array into chunks, however, encountered difficulties in completing the task: { ...

Modify the hue of the iron-icon upon being tapped

There's a simple example I have where my goal is to modify the color of an iron-icon when it's tapped. To achieve this, I'm utilizing iron-selector for tapping: <template> <style> :host { display: block; padding: 10 ...

What causes the toggle to malfunction when clicked on, specifically when the element is assigned the JS class?

Currently, I am working on animating cards using CSS and JavaScript. Everything seems to be working fine except for one issue – the class does not get removed on the second click on the element when using this.classList.toggle('is-active');. Ca ...

Trouble with AJAX page loading and history.pushState functionality following navigation away from the site

My website utilizes XMLHttpRequests to fetch specific parts of webpages upon a user clicking a link. Below is the relevant code snippet: function requestPage(url, push) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { ...

Utilizing arrays of objects as props in React development

I am currently working on a small application that interacts with a REST API. I have encountered an issue when trying to display information from arrays of objects in my code: actions.js import axios from 'axios' function fetchService () { re ...

Obtaining information from the HttpServletResponse through an AJAX form

In my "first.jsp", there is a form containing hidden input values and pointing to another jsp file. <form id="popupForm" name="popupForm" action="<%= cqRequest.externalizeHref(handle) %>" method="post"> <input type= ...

How can NodeJS implement ThreadLocal variable functionality without relying on req and res.locals?

In a specific situation, I am required to handle business logic and logging for each request separately. This means that the data stored should not overlap with data from other requests. Using res.locals or req objects is not an option in this case becaus ...

How can I update the image source using Angular?

<div class="float-right"> <span class="language dashboard" data-toggle="dropdown"> <img class="current" src="us-flag.png" /> </span> <div class="dropdown dashboar ...

When attempting to call an API using the Angular HttpClient, an issue is encountered

I am having trouble displaying my JSON data in my application. I have imported the HttpClientModule in app.module.ts, but I keep getting an error that says: "" ERROR Error: Cannot find a differ supporting object '[object Object]' of ty ...

Struggling to link variables and functions to an angularJS controller

When using the $scope object to bind functions and variables, and making changes accordingly in HTML, the code works fine. But when using a different object, it doesn't work as expected. Here is an example of a working code snippet: ...

Is it possible for Chrome to permit my extension to send HTTPS requests to a server with a self-signed certificate?

My question is about sending AJAX (HTTPS) requests to a server that I own from the background page of my Chrome extension. I have found that without adjusting browser settings, it is difficult to send such requests to an unsigned/self-signed server. I am c ...

Can anyone point me in the direction of the source code for JSON.parse in Node.js, JavaScript, or V8?

When using JSON.parse(fileName_or_stringOfJSON), the string is converted into an object. I'm curious about how this conversion process works in NODEJs and where the source code can be found. ...