You cannot assign a constructor type that is abstract to one that is not abstract

I am attempting to create an abstract component in Angular, but I am encountering the following error:

Error: src/app/app.module.ts:191:5 - error TS2322: Type 'typeof AbstractFormComponent' is not assignable to type 'any[] | Type<any>'.
  Type 'typeof AbstractFormComponent' is not assignable to type 'Type<any>'.
    Cannot assign an abstract constructor type to a non-abstract constructor type.

191     AbstractFormComponent
        ~~~~~~~~~~~~~~~~~~~~~

Here is my implementation of the abstract Component:

@Component({
  selector: 'app-abstract-form',
  templateUrl: './abstract-form.component.html',
  styleUrls: ['./abstract-form.component.scss']
})
export abstract class AbstractFormComponent implements OnInit, AfterViewInit {

  protected constructor(protected formService: FormService) {
  }

  protected abstract getForms(): AbstractControl[];

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    this.getForms().forEach(f => this.formService.addForm(f));
  }
}

It appears that Angular is having issues with the constructor, but since I require it for the service injection, deleting it is not an option. Is there a way to utilize abstract classes while still including a constructor and injecting services?

angulartypescriptabstract-class

Answer №1

The key is to not include the abstract component in app.modules. Surprisingly, I can still utilize it as an abstract Component without encountering any issues.

Answer №3

Utilizing an abstract class as a component appears to be effective in Angular 14. The issue indicated above ('Type 'typeof myAbstractClass' is not assignable to type 'Type'') can be resolved by refraining from attempting to include the abstract class in a module, and instead importing it directly into the child classes from the abstractclass.ts file. I am implementing dependency injection on the abstract constructor. If there are any dependencies that need to be injected which are not utilized in the abstract class, I only include a constructor in the child class for that purpose. This method works exceptionally well.

Answer №4

When it comes to an abstract component class, similar to an interface, it serves as a template and cannot be instantiated. Therefore, it should not be included in the module declaration array. Instead, treat it solely as an interface.

import {SearchDataGridBaseComponent} from "@shared"; // no need to declare in the module

export class HddataComponent extends SearchDataGridBaseComponent{
   .......

}

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

Guide to developing a dynamic method while utilizing IntelliSense assistance

When utilizing itemsApi in React reduxTool kit, dynamic functions like use..., mutate... are generated. These dynamically created methods possess complete intelligence as well. For instance, if you have createApi({... getItems: builder.query<any, st ...

typescript

Functionality for communicating components is only operational on a single platform

I am looking to create a service that can notify my components when there are any changes to the 'idCustomer' property. These changes should trigger certain actions in different components. Currently, I am using console.log to check if the change ...

angulartypescript

Utilize Angular 10 to send a post request and subsequently trigger another request upon successfully completing the first

I am looking for a way to register a user on the backend and then sign them in sequentially. The register route will create the user, while the sign-in route will return a UserModel object if successful. If registration fails, an error will be returned f ...

angularangular10

The error message "Cannot find property 'X' on type 'number' in React TypeScript" is appearing

When iterating over the list of brands, I am facing an issue where the brand properties are not loading properly. During this time, the indexed array is displayed as a skeleton structure. While JavaScript handles this situation well, TypeScript encounter ...

reactjstypescript

Angular2: Addressing the Issue of Duplicate Declarations of Template Reference Variables in Templates

I recently encountered an issue when using Template Reference Variables in a template. Upon declaring identical template reference variables at the root level, the runtime compiler throws errors. Here's an example: <input type="text" id="n-1" #my ...

angularangular2-template

Issue with Firebase CLI preventing deployment of Cloud Functions

I'm currently working on an Angular project, and I'm facing a challenge in deploying a single Firebase function. Here's how my functions directory is structured: https://i.sstatic.net/7h1q2.png When I run the command firebase deploy --only ...

node.jstypescriptfirebasegoogle-cloud-functionsfirebase-cli

Exploring the differences between Office Fabric UI's I[component]StyleProp and the I[component]Styles interface

The Office Fabric UI documentation provides two interfaces for each component, such as https://developer.microsoft.com/en-us/fabric#/components/nav includes INavStyleProps interface and INavStyles interface A component that implements INavStyleProps ...

reactjstypescriptsharepointweb-partsoffice-ui-fabric

What is the best way to choose the option with the highest value?

<option *ngFor="let value of filterItem.values" [(value)]="value.code" [selected]="value.default_ind == Math.max(...filterItem.values.map(item => item.default_ind))" required>{{value.displayName}}</option> I am working with these options, ...

angular

Dismiss the Popover in Ionic 2

After opening a popover that redirects me to another page and then returning to the root page (popToRoot), I reload the data/dom upon an event and dismiss the popup once the json data is received from the server. Everything works smoothly with a lengthy ti ...

javascriptangulartypescriptionic2ionic3

The CSS properties intended for ion-button elements are not taking effect

I'm attempting to set a background color when a ion-button is clicked or maintain the ion-ripple effect after it has filled the button in Ionic 4. I experimented with applying custom CSS states in global.scss, but encountered issues where the active ...

cssangularionic-frameworkionic4

"In Nextjs, it is not possible to utilize the alert function or assign variables directly to the window object

Are you attempting to quickly sanity test your application using the window object's alert function, only to encounter errors like "Error: alert is not defined"? import Image from "next/image"; alert('bruh'); export default function Home() ...

reactjstypescriptwebpacknext.jsjsx

Establishing a connection between MySQL database and an Ionic/Angular application

I have been working on an Ionic/Angular project and I'm facing difficulties in establishing a connection with my MySQL database (mariadb). Despite trying various solutions from online sources, I keep encountering numerous error messages. Any guidance ...

mysqlangulartypescriptionic-frameworkmariadb

Attempting to test the PactV3 GraphQL endpoint leads to failure as it is met with a 500 Internal Server Error

Currently, I am facing a challenge with creating a Pact on the consumer side using Pact-JS. I have noticed that in PactJS v3, the .withQuery method has been removed and support for GraphQL testing is not available as well. Although it should be possible t ...

angularjestjspact

What is the proper way to utilize environment variables on Heroku for my Angular application?

Currently, I am facing difficulties setting up environment variables (or Config Vars in the Heroku world) such as production=true for my angular app on Heroku. I'm struggling to configure the postinstall and build scripts to make use of them effective ...

angularheroku

Ways to check the functionality of mat-paginator

I am currently using a mat-paginator component with the following code: <mat-paginator #paginator [length]="totalRecords" (page)="pageEvent = paginatorEvents($event)" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize"></mat-paginator> ...

angular

Error: The property referenced in the Typescript Ref of another Ref does not exist on the specified type

Utilizing the library https://github.com/lhz516/react-h5-audio-player, I am facing a challenge in correctly defining the type for my useRef without resorting to useRef<any>(null). I have managed to access and modify the audio element using the code ...

reactjstypescriptuse-ref

What is the best way to style an element while working on a CSSStyleDeclaration prototype?

Instead of using element.style.removeProperty(property) to remove properties one at a time, I have created a utility function that can remove multiple properties at once. By extending CSSStyleDeclaration.prototype. Snippet: declare global { interface CS ...

javascripttypescript

Waiting for the HTTP Post response in Angular 2

My Angular2 app is written in TypeScript. I encounter an issue when making a HTTP Post request to create a new record, as the return value from the service does not come back in time to update the DOM with the newly created record. Is there a way to pause ...

angulartypescripthttp-postobservable

How can the file system module (fs) be utilized in Angular 7?

Hello, I am currently working with Angular 7. I recently attempted to utilize the fs module in Typescript to open a directory. However, I encountered an error message stating: "Module not found: Error: Can't resolve fs". Despite having types@node and ...

angulartypescriptfsangular7

Tips for optimizing HttpRequests within nested for-loops that utilize subscribe()?

Our REST-API is designed to be frontend agnostic, meaning it always sends the IRI to nested resources. This results in multiple HTTP calls needed to retrieve data; first for the parent resource, then its child resources and so on. Each Country has linked E ...

angulartypescriptrxjsrxjs-observables