Service has not been properly declared

I encountered an issue with AngularJS where I am struggling to import a Service from one module to another. In the Data module, I have a Service named MenuDataService that I need to utilize in the MenuApp module. However, when attempting to do so, I receive an error message referencing this link.

Within src/data-module/data.module.js:

angular.module('Data', []);

In src/data-module/menudata.service.js:

angular.module('Data')
.constant('CATEGORIES_URI', 'some_uri')
.service('MenuDataService ', MenuDataService);

MenuDataService.$inject = ['$http', 'CATEGORIES_URI'];
function MenuDataService($http, CATEGORIES_URI) {
  var service = this;

  service.getAllCategories = function () {
    return httpRequest(CATEGORIES_URI);
  };
};

In src/menuapp-module/menuapp.module.js:

angular.module('MenuApp', ['Data']);

In src/menuapp-module/categories.controller.js:

angular.module('MenuApp')
.controller('CategoriesController', CategoriesController);

CategoriesController.$inject = ['MenuDataService'];
function CategoriesController(MenuDataService) {
  console.log('CATEGORIES CONTROLLER');
};

index.html:

<script type="text/javascript" src="./lib/angular.min.js"></script>
<script type="text/javascript" src="./src/data-module/data.module.js"></script>
<script type="text/javascript" src="./src/data-module/menudata.service.js"></script>
<script type="text/javascript" src="./src/menuapp-module/menuapp.module.js"></script>
<script type="text/javascript" src="./src/menuapp-module/categories.controller.js"></script>

If anyone could offer assistance, I would greatly appreciate it as I'm unsure of what mistake I might be making...

Thank you for your help!

Answer №1

The service name you defined has an additional space.

.service('MenuDataService ', MenuDataService);
                         ^

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

Using trigonometry, create random orbits in multiple directions around a central point in THREE.js

I'm attempting to create a swirling motion of multiple objects around a single Vector3 point, each moving in different directions to give the effect of swarming around the center. Instead of simply wrapping each object in a Container and applying ran ...

Is it feasible to assess JavaScript expressions during compilation using Webpack?

I'm currently in the process of setting up webpack for a new project. This project is quite extensive and available in multiple languages. I am aiming to have each entry point in my project be represented by separate files in each language. The catch ...

Is there a way to ensure that the line numbers displayed for JavaScript errors in Chrome are accurate?

I suspect either my webpack configuration or my npm run dev script are causing the issue, but I'm unsure of what exactly is going wrong. While running my application in development mode, I encounter error messages like: Uncaught TypeError: this.props ...

What is the best way to switch from using the three.js JSONLoader to the ObjectLoader?

I successfully loaded multiple files using the code below for three.js JSONLoader: <!DOCTYPE html> <html> <head> <title>Rotating Sphere</title> <meta charset="utf-8"> <!-- https://cdnjs.com/libra ...

What is the best way to specify when form inputs are required in AngularJS?

Imagine developing a contact management application (for demonstration purposes) utilizing AngularJS. We have crafted a contact form that includes fields for email and phone number. We aim to make one of the two mandatory, but not both: The email field sh ...

Using jQuery to update the CSS background of a selected element among multiple elements sharing the same class

I am currently developing a basic jQuery script that will enable the background color of the clicked element to change. Below is the code I have so far: <dt> <input id="p_method_banktransfer" value="banktransfer" type="radio" name="payment[metho ...

insert a gap between two elements in the identical line

Is there a way to create spacing between two text fields in the same row? I have tried using margins, paddings, and display flex in the css file but haven't been successful. import "./styles.css"; import TextField from "@material-ui/cor ...

JavaScript - How can I prevent receiving multiple alerts during long polling success?

After following a video tutorial on implementing long polling, I managed to get it working. However, I encountered an issue where my alert message pops up multiple times even though I only receive one response from the server. I was under the impression th ...

Create an AngularJS directive that dynamically adds another directive to the DOM when clicked

I am looking to implement an AngularJS directive that creates a button and upon clicking it, I aim to dynamically add another AngularJS directive (component) to the page. Can anyone guide me on how to achieve this functionality successfully? Here is my " ...

Excessive calls to the component update in React with Javascript are leading to application crashes

componentDidUpdate() { // Retrieving trades from the database and syncing with MobX store axios.get(`http://localhost:8091/trade`) .then(res => { this.props.store.arr = res.data; }) } After implementing this code, my ...

Having an issue with button onClick functionality not working in Javascript

Simple enough. I am struggling to get my button to generate the necessary input upon clicking. The fields should populate where the "household" class is located. I am limited to editing only Javascript and not HTML. Any suggestions? HTML: <ol ...

What is the best way to dynamically disable choices in mat-select depending on the option chosen?

I was recently working on a project that involved using mat-select elements. In this project, I encountered a specific requirement where I needed to achieve the following two tasks: When the 'all' option is selected in either of the mat-select e ...

How to prevent click events and still enable scrolling within a DIV using CSS/JS

Basically, I am looking to enable scrolling within a DIV while also disabling click events. Any suggestions on how this can be achieved? Appreciate any help! ...

Issues with AngularJS functionality – $route.reload() not functioning as expected

I'm attempting to refresh the page using $route.reload(): var App = angular.module("App", ["ngRoute"]); var idx = 0; App.controller("List", function ($scope, $route) { $scope.changeWallet = function (index) { idx = index; $r ...

In Internet Explorer 8, experiment with creating a unique event in plain JavaScript and then capturing it using jQuery

Currently, I am facing an issue with IE8 regarding the execution order of scripts. There is a piece of code that needs to run before JQuery is loaded so I can fire a custom event. This event will be detected later by another section of code once JQuery ha ...

Using NextJs <Script> is only effective after a page has been reloaded

Currently delving into the world of NextJS and encountering an issue with integrating a third-party ebay script onto one of my route pages. The script only seems to appear sporadically upon reloading the page. However, when navigating to the store page via ...

What is the method to access 'let' variables in the console of a developer tool?

When you open the Chrome devtool and enter the code snippet below: // The iife is irrelevant let r = (() => { return 2; })(); and then evaluate r, the output will be: r 2 Surprisingly, both window.r and globalThis.r return undefined. Although let is ...

Execute the ajax function using Facebook API

I am currently working on a code to fetch data from Facebook to my localhost, but I have encountered some challenges along the way. Here are the issues that I am facing and I would appreciate any assistance: (1) Initially, I am retrieving data from a spec ...

What is the reason behind why create-react-app generates the App.js file as a functional component?

Learning React has been quite fascinating for me. I recently used npx create-react-app my-project and noticed that the App.js file was created as a functional component, instead of a class component like in previous versions. After digging around, I stumbl ...

Using vue.js to pass route parameters to a component

I'm encountering an issue with passing a route param directly into a component. Despite following various sets of instructions from the documentation (including using the Composition API as shown in the code snippet below), I continue to receive undef ...