Unable to instantiate an Angular component constructor using a string parameter

Question

Unable to instantiate an Angular component constructor using a string parameter

So, I've created a simple component:

export class PlaintextComponent implements OnInit {
  schema: PlaintextTagSchema;

  constructor(private _ngZone: NgZone, prompt: string, maxRows: number, maxChars: number) {
    this.schema.prompt = prompt;
    this.schema.maxRows = maxRows;
    this.schema.maxChars = maxChars;
  }

  ngOnInit() {
  }
}

But when attempting to compile my app using ng serve, I encountered an error:

component.ts:25:40 - error NG2003: No suitable injection token for parameter 'prompt' of class 'PlaintextComponent'.
Found string

25   constructor(private _ngZone: NgZone, prompt: string, maxRows: number, maxChars: number) {

I have scoured the internet for solutions to this puzzling error, but so far, nothing has helped me resolve it. Despite my best efforts, the constructor setup appears correct to me. However, as a newcomer to Angular/TypeScript, I may be overlooking a fundamental detail. Any assistance would be greatly appreciated. Thank you.

javascript angular typescript

Answer 1

Answer №1

Revamp the Constructor as shown below

  constructor(private _ngZone: NgZone, @Inject(String) alert: string, numTabs: number, maxWords: number)

remember

import { Inject } from '@angular/core';

Answer 2

Revamp the Constructor as shown below

  constructor(private _ngZone: NgZone, @Inject(String) alert: string, numTabs: number, maxWords: number)

remember

import { Inject } from '@angular/core';

Answer 3

Answer №2

Encountered the same issue myself. It seems like Angular is attempting dependency injection with the constructor parameters (similar to how it's done with services), which may cause errors in certain cases. To resolve this, simply move your class properties outside of the constructor declaration. Here's an example:

export class PlaintextComponent implements OnInit {
  schema: PlaintextTagSchema;
  private _ngZone: NgZone;
  prompt: string;
  maxRows: number; 
  maxChars: number;

  constructor() {}

  ngOnInit() {
  }
}

You may need to find an alternative method to initialize your Component, such as using input properties.

If you give this a try, I'd love to hear if it resolves the issue! ;D

Answer 4

Encountered the same issue myself. It seems like Angular is attempting dependency injection with the constructor parameters (similar to how it's done with services), which may cause errors in certain cases. To resolve this, simply move your class properties outside of the constructor declaration. Here's an example:

export class PlaintextComponent implements OnInit {
  schema: PlaintextTagSchema;
  private _ngZone: NgZone;
  prompt: string;
  maxRows: number; 
  maxChars: number;

  constructor() {}

  ngOnInit() {
  }
}

You may need to find an alternative method to initialize your Component, such as using input properties.

If you give this a try, I'd love to hear if it resolves the issue! ;D

Unable to instantiate an Angular component constructor using a string parameter

Answer №1

Answer №2

Similar questions

How can one use an Angular Route to navigate to a distinct URL? Essentially, how does one disable matching in the process?

Building a Next.js application in a docker container on a local machine using minikube is successful, however, the build fails when attempting to build it on a staging environment

Gain access to JSON information and store it in the datasource variable using the Kendo datasource function

Performing JavaScript functions after fetching an XSLT page via AJAX

A comparison of parent and child components

Guide on implementing iterative data path in v-for loop using Vue

Angular select automatically saves the selected option when navigating between views

How to iterate through a "for" loop in JavaScript using Python-Selenium?

The redesigned pie chart animations in d3 are experiencing glitches

Updating the state of Formik

Ionic 3 connection with WooCommerce store facing issues due to absent parameters

Discover and showcase individual product information using Product ID in Angular 8 with Firebase integration

Revamp State before redirecting using React Router Dom

Is jQuery AJAX returning improperly formatted JSON when using the jsonp type?

Having trouble getting rid of the border-bottom?

Heroku-hosted application experiencing issues with loading website content

Exploring the process of extracting a nested JSON value using Postman

Sending JSON data from a Django view to a JavaScript function

What are the best practices for integrating PrimeVue with CustomElements?

When converting a PDF to a PNG, the precious data often disappears in the process