The argument representing 'typeof Store' cannot be assigned to the parameter representing 'Store<AppState>'

I'm encountering an issue while trying to expand a service in Angular that utilizes ngrx. The error message I'm receiving is as follows:

Argument of type 'typeof Store' is not assignable to parameter of type 'Store<AppState>'

This is the parent class snippet:

import { Store } from '@ngrx/store';
import { AppState } from '../store/file-uploader.state';
import { AbstractStorage } from '@storage';

export class FileUploaderService {
    constructor(
        private store: Store<AppState>,
        private storage: AbstractStorage,
    ) { }
}

Now, moving on to the child class:

import { Store } from '@ngrx/store';
import { AppState } from '../store/file-uploader.state';
import { AbstractStorage } from '@storage';

export class DataSourceService extends FileUploaderService implements AbstractFileUploader  {
    constructor() {
        super(Store, AbstractStorage)
    }
}

In order to invoke the superclass constructor properly, I need to provide these two arguments. While attempting to pass Store<AppState>, it indicates that AppState is being used as a value rather than a type. How can I accurately define this argument when invoking super? Any suggestions on how to declare this correctly?

Answer №1

Instead of passing the type to super, make sure you are passing the instances. To see if this resolves your issue, you can test out the following code snippet:

    export class DataSourceService extends FileUploaderService implements AbstractFileUploader {
      constructor(private store: Store<AppState>, private storage: AbstractStorage) {
          super(store, storage);
      }
    }

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

What could be the reason for my Angular website displaying a directory instead of the expected content when deployed on I

My current challenge involves publishing an Angular application to a Windows server through IIS. Upon opening the site, instead of displaying the actual content, it shows a directory. However, when I manually click on index.html, the site appears as intend ...

Webpack 2.7.0 throws an error: "Unexpected parameter: theme"

At the moment, I am on webpack 1.16.0 and using --theme as an argument to set the output path and plugin paths. The command appears as: rimraf dist && webpack --bail --progress --profile --theme=<name of theme> However, as I try to upgrade ...

What is the most efficient way to retrieve a single type from a union that consists of either a single type or an array of types

Is there a way to determine the type of an exported union type by extracting it from an array, as illustrated in the example above? How can this be achieved without directly referencing the non-exported Type itself? interface CurrentType { a: string; b ...

Testing Angular 2 components with material icons and images

Recently, I finished creating a unique component that showcases an image, material icons, and a custom directive known as ticker. This directive allows for scrolling text if it exceeds the width of the element. https://i.stack.imgur.com/GpDSr.png My next ...

Exploring the integration of a standalone component in Angular 17 using an http service

I'm facing an issue with a standalone component: @Component({ standalone: true, // <--- See here selector: "app-login", imports: [FormsModule, CommonModule], templateUrl: "./login.component.html", styleUrl: "./lo ...

"Troubleshooting: Child Component Not Reflecting Changes in UI Despite Using Angular

My child component is designed to display a table based on a list provided through @Input(). The data is fetched via http, but the UI (child component) does not update unless I hover over the screen. I've seen suggestions about implementing ngOnChange ...

The Angular2 Router encounters an issue with the URL when it contains the "&

Ever since updating to the latest version of angular v4.3.2, I've encountered an issue where all my URLs break at the & value. For instance, I have a route /:value from which I need to retrieve the value: http://localhost:4200/one&two Inst ...

Using TypeScript, effortlessly retrieve objects within React components based on their keys

I am looking for a way to dynamically choose a React component based on a key within an object import React, {useState, useEffect} from 'react' import ComponentA from '@components/ComponentA'; import ComponentB from '@components/Co ...

Using an Angular if statement to validate the current route

I have a modal component that needs to display specific data depending on whether the user came from '/tabs/tab1' or '/tabs/tab2'. The issue is that both sets of data are currently being displayed in the modal component HTML, and the if ...

Exploring Angular's filtering capabilities and the ngModelChange binding

Currently, I am in the process of working on a project for a hotel. Specifically, I have been focusing on developing a reservation screen where users can input information such as the hotel name, region name, check-in and check-out dates, along with the nu ...

Angular: Tailoring the Context Menu

Currently, I am utilizing a helpful tutorial to implement a custom context menu feature. The main issue I am facing is that when a user interacts with the list items, I want the correct index of each item to be displayed. However, at the moment, clicking o ...

Zone.assertZonePatched does not exist as a valid function

I am encountering an error message: Unhandled Promise rejection: Zone.assertZonePatched is not a function Despite importing zonejs correctly in my index.html file: <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

Error in Angular vendor.js (124116) related to Dom7 class in Internet Explorer 11

Every time I launch my project in IE11, I encounter an issue SCRIPT1002: Syntax error vendor.js (124116,1) Upon inspection of vendor.js at the specified line, I come across class Dom7 { constructor(arr) { const self = this; // Create array-lik ...

What is the best way to send serverside parameters from ASP.Core to React?

After setting up a React/Typescript project using dotnet new "ASP.NET Core with React.js", I encountered the following setup in my index.cshtml: <div id="react-app"></div> @section scripts { <script src="~/dist/main.js" asp-append-versi ...

Navbar Username in Next.js with Typescript and Supabase Integration

I'm currently facing an issue with retrieving the username of a user to display in my navbar. The desired username is stored in the "username" column of the table called "profiles" in my Supabase database. However, the data that's populating the ...

Issue with caching when using lazy loading with Angular 2 components

When naming Angular 2 lazy loaded components, they are designated as 0.js, 1.js, etc. However, the entry point is given a version prefix while all lazy loaded components keep their original names. This leads to discrepancies in the code versions present ...

Tips for injecting a service into a class (not a component)

Can you inject a service into a class that is not a component? Consider the following scenario: Myservice import {Injectable} from '@angular/core'; @Injectable() export class myService { dosomething() { // implementation } } MyClass im ...

Creating a primary index file as part of the package building process in a node environment

Currently, I have a software package that creates the following directory structure: package_name -- README.md -- package.json ---- /dist ---- /node_modules Unfortunately, this package cannot be used by consumers because it lacks an index.js file in the r ...

Unable to delete event listeners from the browser's Document Object Model

Issue at hand involves two methods; one for initializing event listeners and the other for deleting them. Upon deletion, successful messages in the console confirm removal from the component's listener array. However, post-deletion, interactions with ...

Injection of dependencies in Angular can be done outside of the constructor

In my class, I have a constructor that takes in some data. export class MyClass { constructor(data: any) { this.data = data; } } I also want to include ChangeDetectorRef as a parameter in the constructor like this. constructor(data: any, cd: ...