Unable to utilize ES6 syntax for injecting a service

I am encountering some issues while trying to implement a service into a controller using ES6 syntax.

CategoriesService.js

export default class CategoriesService {
    constructor() {
        this.getCategories = function ($q) {
            var deferred = $q.defer();
            deferred.resolve([
                {
                    id: '1',
                    name: 'Category One',
                    slug: 'category_one',
                    profile: {
                        id: '1',
                        name: 'Thomas Wayne',
                        location: '1007 Mountain Drive, Gotham',
                        description: 'Dr. Thomas Wayne, one of the most respected patrons in all of Gotham City',
                        images: ['...', '...'],
                        featuredImage: '...'
                    }
                },
                {
                    id: '2',
                    name: 'Category Two',
                    slug: 'category_two',
                    profile: {
                        id: '2',
                        name: 'Martha Kane',
                        location: '1007 Mountain Drive, Gotham',
                        description: 'Martha Wayne (née Kane) was born into the Kane family, who were so rich that they allegedly "owned the half of Gotham that the Waynes don\'t"',
                        images: ['...', '...'],
                        featuredImage: '...'
                    }
                }
            ]);
            return deferred.promise;
        }
    }

}


CategoriesService.$inject = [];

CategoriesController.js

import CategoriesService from './CategoriesService';

export default class CategoriesController {
    constructor(CategoriesService) {
        CategoriesService.getCategories().then(getCategoriesSuccessFn, getCategoriesFailFn);

        function getCategoriesSuccessFn(data) {
            this.categories = data;
        }

        function getCategoriesFailFn() {
            console.error('Something went wrong');
        }
    }
}
CategoriesController.$inject = ['CategoriesService'];

Error Message:

angular.js:13424 Error: [$injector:unpr] Unknown provider: CategoriesServiceProvider <- CategoriesService
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=CategoriesServiceProvider%20%3C-%20CategoriesService
    at angular.js:68
    at angular.js:4418
    at Object.getService [as get] (angular.js:4571)
    at angular.js:4423
    at getService (angular.js:4571)
    at injectionArgs (angular.js:4595)
    at Object.invoke (angular.js:4617)
    at $controllerInit (angular.js:10027)
    at nodeLinkFn (angular.js:8965)
    at angular.js:9362

Can anyone provide insight on what might be causing this issue?

javascriptangularjsecmascript-6

Answer №1

Despite the ES6 import/export capabilities, you must still ensure that the service is registered.

MainApp.js

import CategoriesService from './CategoriesService';
import CategoriesController from './CategoriesController';

angular.module('app', [])
  .service('CategoriesService', CategoriesService)
  .controller('CategoriesController', CategoriesController);

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

The communication between socket.io encountered a net::ERR_SSL_PROTOCOL_ERROR

Here is the client code I am using: const socket = io(url); And this is the server code running on a Linux server with Express: const server = require("http").createServer(app); However, when I attempt to establish a connection, an error occurs. https:/ ...

javascriptnode.jsexpresssslsocket.io

Everything seems to be functioning properly on the local server, but once the media files or players (mp3 and mp4) are uploaded, the background fails to work entirely

function playMusic() { var songs = [ "pump.mp3", "ybwm.mp3", "bb.mp3", ]; var randomIndex = Math.floor(Math.random() * songs.length); var selectedSong = songs[randomIndex]; var audio = new Audio(selecte ...

javascripthtmlmp3mp4

Adjust the sliders according to the current time

I am looking to display different sliders based on the time of day. For instance, 'slider set 1' from 0-9am, 'slider set 2' from 9am-12pm, and so forth. I am new to java script and need assistance in solving this challenge. Below is the ...

javascriptjqueryslider

React - the use of nested objects in combination with useState is causing alterations to the initial

After implementing radio buttons to filter data, I noticed that when filtering nested objects, the originalData is being mutated. Consequently, selecting All again does not revert back to the original data. Can anyone explain why both filteredData and orig ...

javascriptreactjsnext.js

Retrieve the property values of `T` using a string key through the `in

Having trouble accessing a property in an object using a string index, where the interface is defined with in keyof. Consider the following code snippet: interface IFilm { name: string; author: string; } type IExtra<T extends {}> = { [i ...

javascripttypescript

Javascript-generated HTML elements are invisible

I am attempting to create a "circle of fifths" using html, css, and javascript. I am following this tutorial: https://blog.logrocket.com/interactive-svg-circle-of-fifths/ Although I am using the astro framework, I don't believe my issue is related to ...

javascripthtmlcssastrojs

React: Remove a particular row from the table

I am currently working on a project that involves building a table component. Each row in this table is also a separate component. class FormulaBuilder extends Component { constructor(props) { super(props); this.state = ...

javascriptarraysreactjs

When I specify the type for the function parameter, an error occurs when I attempt to execute the function

When I assign a generic type to the function parameter and try to call the function, an error message pops up stating "This expression is not callable. Type unknown has no call signature." function a() { return 'abc' } function fun<T>(x: T ...

javascripttypescripttypescript-generics

Tips for detecting and handling errors in user input from the console

Is there a way to catch errors in Chrome's developer tools console when an input throws an error? I attempted using window.addEventListener("error") but it seems that the onerror event listener on window does not capture the console errors. ...

javascript

Please proceed with submitting your choices in the order that you have selected

My goal is to submit options from a dropdown list in the order they are selected, rather than in the order they appear in the list. How can I achieve this? Here is the HTML code for the dropdown: < select style = "padding: 1em;" name = "skills" multi ...

javascriptjqueryhtml

What is the method for configuring the URL of an ajax request to open in a separate window?

I am currently working on an ajax call where I need to open a URL in a new tab or window. Since I'm still learning about ajax, I would greatly appreciate any help and explanation that you can provide. Below is the code snippet: $.ajax({ url: &apo ...

javascriptajax

AngularJS Service Implementing the Pub/Sub Design Pattern

I've been browsing for solutions to a problem and stumbled upon an answer provided by Mark Rajcok angular JS - communicate between non-dependend services However, I am struggling to fully grasp his explanation, particularly this part: angular.forEa ...

javascriptangularjsdesign-patternspublish-subscribe

Angular experiencing a callback mismatch error while using Auth0

Greetings! I am currently utilizing Auth0 with Nodejs and angularjs in my project. Here are the goals I aim to achieve: 1. User signup using Auth0's lock feature 2. When a user logs in, a callback should be triggered on my Node.js server 3. Ret ...

angularjsnode.jsauth0

Issues with JavaScript causing slideshow to malfunction

I'm experiencing some issues with my image slider. It seems that during the initial loop, the slideshow keeps reverting back to 'image3'. However, after the first loop, everything appears to work correctly. I am looking for a solution to ens ...

javascripthtmlcss

Turn off all VuetifyJS transitions

Is there a way to completely turn off all transitions, such as the slide-x-transition or dialog modal scale transition, in VuetifyJS? ...

javascriptvue.jstransitionvuetify.js

Issue with combining an AngularJS template generated from ng-repeat with a custom directive on the same element

Currently, I have implemented an ng-repeat directive on an element to loop through an array in the scope. Additionally, I have a custom directive (used to create a jquery widget) applied to the same element. The issue arises because the custom directive i ...

jqueryangularjsangularjs-directiveangularjs-ng-repeat

Guide to integrating custom fields in Wordpress with mapbox-gl js to generate map markers

Currently, I am in the process of generating a map that will display various points using Mapbox and WordPress. To achieve this, I have set up a custom post type within WordPress where the coordinates are stored in custom meta fields. Although the fields h ...

javascriptphpjsonwordpressmapbox

Failed to locate lodash during npm installation

I recently set up my project by installing lodash and a few other libraries using npm: npm install grunt-contrib-jshint --save-dev npm install grunt-contrib-testem --save-dev npm install sinon --save-dev npm install -g phantomjs npm install lodash --save ...

javascriptnode.jsnpmtestem

Include various categories into the div containers of the listed items within the query outcomes

Is there a way to customize div styles based on query results? I want to differentiate the styles of divs in the result list based on their content. For example: I'd like bird names in the result list to have different div styles compared to other a ...

javascriptphpjqueryhtmlcss

I'm looking to create a redirect feature using a QR code that will direct users to a specific page within my Flutter app. How

When the user scans the QR code, they will be taken to a secret internal page that can only be accessed through this specific link. I attempted to use various libraries such as , but it did not achieve the desired outcome. ...

javascriptandroidflutterdart