Encountering an issue with NGRX 11 installation in Angular resulting in an error

Encountering a problem due to this error message:


ERROR in node_modules/@ngrx/store/src/reducer_creator.d.ts:32:99 - error TS1005: ',' expected.

32 export declare function on<State, Creators extends readonly ActionCreator[]>(...args: [...creators: Creators, reducer: OnReducer<State, Creators>]): ReducerTypes<State, Creators>;
                                                                                                     ~
node_modules/@ngrx/store/src/reducer_creator.d.ts:32:118 - error TS1005: ',' expected.

32 export declare function on<State, Creators extends readonly ActionCreator[]>(...args: [...creators: Creators, reducer: OnReducer<State, Creators>]): ReducerTypes<State, Creators>;

From what I've gathered online, it seems like this issue may be related to the version of TypeScript used. I've attempted adjusting to both lower and higher versions with no success.

The Angular version I'm working with is:

    _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 10.0.8
Node: 12.13.0
OS: win32 x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cdk                      10.2.7
@angular/cli                      10.0.8
@angular/material                 10.2.7
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.5
typescript                        4.0.7
webpack                           4.43.0

Here's the structure of my package.json file:

{
  "name": "bookmark",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    [list of dependencies]
  },
  "devDependencies": {
    [list of devDependencies]
  }
}

Despite trying different TypeScript versions and deleting node_modules multiple times, the issue persists.

Answer №1

To use @ngrx 11, Angular 11 is required. Consider installing @ngrx 10.

"@ngrx/effects": "^10.1.2",
"@ngrx/store": "^10.1.2",
"@ngrx/store-devtools": "^10.1.2",

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: { "message": "sqlite3_prepare_v2 error: token "876EL003" not recognized", "code": 5}

I am having trouble filtering the SQLite data with two conditions. I keep getting an unrecognized token error and I suspect that my query statement might be incorrect in the script. Could you please take a look and see if you can help me out? Thank you! ...

Is there a way for me to trace the source of an unclear typescript error message about redeclaring a block-scoped variable named 'length'?

After deleting my node modules and running yarn, I encountered a new error that stated: node_modules/typescript/lib/lib.dom.d.ts:17687:13 - error TS2451: Cannot redeclare block-scoped variable 'length'. 17687 declare var length: number; Despite ...

Angular obscured the referencing pointer

After updating Angular, I encountered issues with my code. Previously, the following code worked fine: @Component({ templateUrl: './some.component.html', styleUrls: ['./some.component.scss'] }) export class SomeComponent { ... p ...

Discovering an unfamiliar HTML element: the mysterious <spinner> tag - its origin and purpose remain a puzzle

UPDATE: As I eliminate possibilities, it appears that this is related to the https://github.com/mpalourdio/ng-http-loader module which is injected by another dependency. What's interesting is that this module uses the tag <ng-http-loader>, not & ...

Exploring the depths of nested decimal values in Mongo databases

My experience with MongoDB (not local) involves an entry in the collection structured like this. name: "fancy name" description: "fancy description" category: "fancy category" options: Object small: 5.35 medium: 9.25 large: 16.00 However, w ...

Encountering an issue with Angular while starting a new project - property not found

I recently attempted to start a new project using the angular framework. I ran the following commands: ng new test followed by ng serve The process seemed to be running smoothly, but unfortunately, I encountered the following errors: https://i.sstatic.ne ...

CSS code for a fixed fullscreen menu with scrolling

I have implemented a full-screen menu that covers the entire screen, excluding the header and menu tab bar. You can view it here: https://i.stack.imgur.com/h5cQa.png On smaller screens, the entire menu cannot be displayed at once, as shown here: https://i. ...

Leveraging fetched configuration variable in Angular 6's module.forRoot()

For my application, I am using ng-intercom from this link: https://github.com/CaliStyle/ng-intercom. The usage of ng-intercom requires a configuration key to be set in the forRoot() method. The configuration key is obtained through an API call made in the ...

Updating the assembly version in .net resulted in an error message stating that the file or assembly could not be loaded because a strongly-named assembly is necessary

I recently encountered an issue with an assembly containing C# code. The initial version of this assembly was 1.0.0.0, and during serialization, the assembly's information was also serialized into binary format. However, after updating the assembly&ap ...

Navigating in Angular 2 RC4 with Path Variables Containing Special Symbols

Could someone offer suggestions on how to correctly call parameters with special characters from URLs? Below is my current code for calling the parameter: ngOnInit() { this.route.params.subscribe(params => { let accountrefID = params ...

Is it possible to nullify an object and utilize nullish coalescing for handling potentially undefined constants?

In my development work with React, I often utilize a props object structured like this: const props: { id: number, name?: string} = { id: 1 }; // 'name' property not defined const { id, name } = props; // the 'name' constant is now fore ...

Using Typescript and React to retrieve the type of a variable based on its defined type

Just getting started with Typescript and could use some guidance. Currently, I'm using React to develop a table component with the help of this library: Let's say there's a service that retrieves data: const { data, error, loading, refetc ...

Achieving a clean/reset for a fetch using SSR in Next 13

Is there a way to update the user variable in the validateToken fetch if a user signs out later on, such as within a nested component like Navigation? What is the best approach to handle clearing or setting the user variable? Snippet from Layout.tsx: impo ...

Unable to load app.component.html on Plnkr

Plunker link: Click here to view the Plunker https://i.sstatic.net/QXZDv.png Resource Directory: https://i.sstatic.net/yS423.png app.ts File Content: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/plat ...

Prevent Bootstrap 4 dropdown from closing on click in Angular 2

Could someone help me prevent the dropdown from closing automatically when clicking inside it? Here is the code snippet: <li class="nav-item dropdown"> <div ngbDropdown class="d-inline-block"> <a class=" ...

Encountering an issue when transmitting a file from React/TypeScript to a C# API: "Error message stating 'The JSON value could not be converted to System.Byte[]'"

I'm working on transferring an image file from a frontend built in React/Typescript to a C# API. Here are the functions responsible for uploading a photo and sending the data to the C# API using Axios: const handleImageUpload = (event: React.ChangeEve ...

Issue in Angular form: Element removal from the DOM does not remove it at the specified index, instead removes the last item

I'm encountering an issue where the wrong element is being removed from the DOM. In my onDelete() method, I am deleting a specific FormControl at a certain index, but in the actual DOM, it's removing the last item instead of the intended one. Fo ...

What is the most effective way to loop and render elements within JSX?

Trying to achieve this functionality: import React from 'react'; export default class HelloWorld extends React.Component { public render(): JSX.Element { let elements = {"0": "aaaaa"}; return ( ...

The error thrown is: "Attempting to access the 'authService' property of an undefined object using TypeDi."

In the process of setting up an authentication system, I have created a class called AuthRouter: import { Router } from 'express' import Container, { Service } from 'typedi' import AuthenticationController from './index' @Ser ...

Error in compiling versions of angular/cli and TypeScript

I've been working on updating my project to angular5. Within my package.json file: "dependencies": { "highcharts-export-csv": "git+https://github.com/highcharts/export-csv.git" } "devDependencies": { ...