Encountered a runtime error in NgRx 7.4.0: "Uncaught TypeError: ctor is not a

I'm facing difficulties trying to figure out why I can't register my effects with NgRx version 7.4.0. Despite simplifying my effects class in search of a solution, I keep encountering the following error:

main.79a79285b0ad5f8b4e8a.js:33529 Uncaught TypeError: ctor is not a constructor
    at _createClass (main.79a79285b0ad5f8b4e8a.js:33529)
    at _createProviderInstance (main.79a79285b0ad5f8b4e8a.js:33501)
    at initNgModule (main.79a79285b0ad5f8b4e8a.js:33432)
    at new NgModuleRef_ (main.79a79285b0ad5f8b4e8a.js:34161)
    at Object.createNgModuleRef (main.79a79285b0ad5f8b4e8a.js:34150)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (main.79a79285b0ad5f8b4e8a.js:36687)
    at main.79a79285b0ad5f8b4e8a.js:30069
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.f00ff83aa2c2b28f8bcd.js:7646)
    at Object.onInvoke (main.79a79285b0ad5f8b4e8a.js:29604)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.f00ff83aa2c2b28f8bcd.js:7645)

The module definition is as follows:

@NgModule({
    imports: [
        CommonModule,
        StoreModule.forRoot({settings: settingsReducer}),
        EffectsModule.forRoot([SettingsEffects])
    ],
    declarations: [/*..other declarations..*/],
    exports: [/*..other exports..*/],
    providers: [/*..other providers..*/],
})
export class MyModule {
}

The dependencies listed in my package.json:

"dependencies": {
    "@ngrx/effects": "7.4.0",
    "@ngrx/router-store": "7.4.0",
    "@ngrx/store": "7.4.0",
    "@ngrx/store-devtools": "7.4.0",
    "ng2-translate": "5.0.0"
  },

My dev dependencies are as follows:

"devDependencies": {
  "@angular/common": "7.2.15",
  "@angular/compiler": "7.2.15",
  ...
}

The SettingsEffects class that I have simplified looks like this:

@Injectable()
export class SettingsEffects {

    constructor(
        private actions$: Actions
    ) {
    }

}

Even in its original state, the SettingsEffects class triggers the same error.

If I remove the line:

EffectsModule.forRoot([SettingsEffects])

from the imports, the application launches successfully; however, the effects do not execute, which isn't ideal.

Despite searching extensively online, I haven't found any clues as to why this issue persists. This module is part of a library imported into the app's main GUI, and we have ensured there are no conflicting package versions; everything uses version 7.4.0 of the store modules.

I would greatly appreciate any assistance! I've been grappling with this problem for a whole day now!

javascriptangulartypescriptreduxngrx

Answer №1

I think it's important to note that using forRoot() for a feature module may not be the best approach.

@NgModule({
    imports: [
        CommonModule,
        StoreModule.forRoot({settings: settingsReducer}),
        EffectsModule.forRoot([SettingsEffects])
    ],
    declarations: [/*..other declarations..*/],
    exports: [/*..other exports..*/],
    providers: [/*..other providers..*/],
})
export class MyModule {
}

A better alternative would be:

@NgModule({
    imports: [
        CommonModule,
        StoreModule.forFeature("settings", settingsReducer),
        EffectsModule.forFeature([SettingsEffects])
    ],
    declarations: [/*..other declarations..*/],
    exports: [/*..other exports..*/],
    providers: [/*..other providers..*/],
})

It's worth mentioning that initializing the store for a feature requires passing 2 arguments instead of an object as shown in your current implementation.

StoreModule.forRoot({settings: settingsReducer}) // this is incorrect

StoreModule.forFeature("settings", settingsReducer) // this is the correct way

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

Associating a mouse click with elements within a repetitious function

Currently, I am importing children of element with ID #parentEle, creating a duplicate of each child and adding it to an array with a new ID - #eleCopy(i). I am facing an issue where I am trying to implement a click function on the original imported objec ...

javascriptjquery

Creating a Canvas Viewport Tailored for Multiplayer Gaming

Lately, I've been playing around with the HTML5 Canvas while working on an io game. However, I've hit a roadblock when it comes to handling the viewport. Setting up the viewport itself isn't too complicated, but accurately displaying other p ...

javascripthtmlcanvasviewport

The Google Maps API allows all markers to be connected to a single infowindow

I've been grappling with this issue for some time now, but I just can't seem to find a solution! I'm retrieving data from a database in Laravel using Ajax and then attempting to display infowindows for each marker on Google Maps. The markers ...

javascriptjquerylaravelgoogle-maps-api-3vue.js

A guide to successfully sending the 'onClick' function to a child component within React

In my coding project, I have developed a versatile Modal component that can be customized with different headers, bodies, and footers, as well as various arguments for the Reactstrap components. While I am using Reactstrap to create the Modal, the issue is ...

javascriptreactjs

What steps are required to transform a TypeScript class with decorators into a proper Vue component?

When I inquire about the inner workings of vue-class-component, it seems that my question is often deemed too broad. Despite examining the source code, I still struggle to grasp its functionality and feel the need to simplify my understanding. Consider th ...

typescriptvue.jsvue-class-componentsvue-property-decorator

Utilizing media queries to customize the appearance of a jQuery accordion widget

Hello, I'm struggling with implementing a jQuery accordion for mobile platforms that destroys itself on larger screens. While my code is mostly working, I've encountered two issues: The accordion only gets destroyed when the window is resized ...

javascriptjqueryhtmlcssjquery-ui

Discover the step-by-step guide to creating a dynamic and adaptable gallery layout using

I have encountered an issue with my gallery where the images stack once the window is resized. Is there a way to ensure that the layout remains consistent across all screen sizes? <div class="container"> <div class="gallery"> &l ...

javascriptjqueryhtmlcssbootstrap-4

Having an extensive amount of mat-tooltip components within a mat-table can cause a decrease in

Our team has been utilizing the mat-table grid implementation, with a mat-tooltip for each cell. It seems that the tooltip renders for every cell, regardless of whether the user hovers over it or not. Below is a snippet of the code showcasing the tooltip u ...

angularperformanceangular-materialangular6

Challenges in retrieving information from a two-dimensional JSON dataset

I am encountering an issue with a nested JSON structure. JSON: [{"id":"15", "rand_key":"", "landlord_name":"Shah", "property_req_1":{ "lead_req_id":"", "lead_id":"0", "category_id":"1", "region_id":"1", "area_location_id":"17", ...

javascriptjson

What is the best method to retrieve HTTP headers from the backend and simultaneously send HTTP parameters to it in ASP.NET Core and Angular?

I am currently working with Angular 15 and ASP.NET Core 5. The backend retrieves paged items based on the parameters pageSize and pageIndex. Once the action method receives the pageSize and pageIndex parameters, it sends both the paged items and the total ...

angulartypescriptasp.net-core

Improprove the performance of an array of objects using JavaScript

Hello there, I am currently in the process of creating an array. this.data = [{ label: 'Total', count: details.request.length, }, { label: 'In-Progress', count: details.request.filter((obj) => obj.statusId === 0 || ob ...

javascripttypescriptjavascript-objects

when webpack loads the bundle.js file, the mime type is converted to text/html

I'm currently working on implementing server side rendering for an application using react-redux and express for the server. We are also utilizing webpack to bundle our assets. To get started, I referred to the following documentation: https://redux ...

javascriptexpressreact-reduxserver-side-renderingserverside-javascript

Is there a way to simultaneously view and send this JSON data to the server using console.log?

I'm looking to inspect the JSON data being sent and received by the server, but I'm struggling to understand how promises work in this scenario. When I use console.log() on the function body, I see Promise { pending }. Unfortunately, I can' ...

javascriptjsonfunctionexpresspromise

Inverted Scrolling Problem in Firefox

I am facing an issue with a script that inverts mouse movement for horizontal scrolling. It works fine in most browsers except Firefox. I could use some advice on how to troubleshoot this problem! $("body").mousewheel(function(event, delta) { ...

javascriptjquery

What is the best way to retrieve JSON data from a raw.github URL and save it into a variable?

Suppose there is a JSON file named data.json on Github. The raw view of the file can be accessed through a URL like this: https://raw.githubusercontent.com/data.json (Please note that this URL is fictional and not real). Assume that the URL contains JSON ...

jsontypescriptcypress

Issue with animation transition not triggering on initial click

I am currently working on creating an animation for a form using JS and CSS. Here is the code snippet I have: var userInput = document.getElementById("login-user"); var userLabel = document.getElementById("user-label"); // User Label Functions funct ...

javascripthtmlcss

Angular not displaying retrieved data

Having an issue with fetching data from an API using Angular. Although the console log confirms that the data is successfully fetched, it doesn't display on the page. Any assistance would be greatly appreciated. Take a look at my code: app.component. ...

javascriptangularapi

Learn how to safely handle JSON vulnerabilities in Angular by removing the prefix ")]}'," from the JSON data

Our Webservice JSON output is designed to enhance security by starting with the prefix ")]}'," I have read several articles and learned that HttpClient offers libraries to remove this JSON prefix, but I'm struggling to find a proper example. I ...

angular

Control the movement of the mouse pointer using javascript

For my University presentation on click-jacking, I came across an intriguing example that I wanted to replicate but didn't know where to start. The whole concept seemed very complex to me. To get a better idea, please take a look at this video: https ...

javascriptjqueryhtml

Sorting the Czech alphabet with the help of Tablesorter

Utilizing the tablesorter characterEquivalents extension as outlined in this documentation. I have created a similar extension for Czech characters, but the sorting is not functioning correctly for certain characters - like \u017d $.extend( $.tables ...

javascriptjquerytablesorternon-english