What is the process for disabling dependency injection in an Angular component?

Question

What is the process for disabling dependency injection in an Angular component?

My Angular component serves as a superclass and is never instantiated on its own. There are multiple components that extend this one, each operating on different data types, so the superclass utilizes generic typing.

In addition to this, the superclass must be able to create objects of the provided type. Therefore, you can see that the constructor of the component takes a parameter to define a constructor for the generic type.

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent<Class1> implements OnInit {

    public object!:Class1;

    constructor(protected type1 : new () => Class1) { 
        this.object = new this.type1();
    }

}

It's important to note that when the subclass component calls super(), it always provides the actual type (e.g. MyClass), ensuring the component has access to it.

An essential point to highlight is that this setup works perfectly fine. When I use `ng serve`, the generic type is passed from the subclass component, and the entire page functions correctly as intended.

I'm now working on transforming this generic component into a library package for broader usage. However, I face an issue during the build process where I receive the error message: "error NG2003: No suitable injection token for parameter 'type1' of class 'MyComponent'."

The Angular compiler mistakenly believes it needs to inject something into that constructor parameter, even though I have no need for this. How can I disable this behavior so that the compiler allows me to build and pass the constructor argument as I already know how to do?

angular typescript dependency-injection

Answer 1

Answer №1

Avoid using the @Component decorator on the superclass; instead, apply it to the specific components that inherit from this class.

You can also consider creating an Injection Token for the type function and then provide it from the child classes.

// Update your typings and utilize them rather than 'any' type
export const TYPE_INJECTION_TOKEN = new InjectionToken<new () => any>(
  'TYPE_INJECTION_TOKEN'
);

// Should this actually be a directive? Is there a need to call it explicitly?
@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  public object;

  constructor(_injector: Injector) {
    const factory = _injector.get(TYPE_INJECTION_TOKEN);

    this.object = new factory();
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    {
      provide: TYPE_INJECTION_TOKEN,
      useValue: function () {}, // This serves as the constructor function
    },
  ],
})
export class AppComponent extends MyComponent {
  constructor(_injector: Injector) {
    super(_injector);
  }
}

Answer 2

Avoid using the @Component decorator on the superclass; instead, apply it to the specific components that inherit from this class.

You can also consider creating an Injection Token for the type function and then provide it from the child classes.

// Update your typings and utilize them rather than 'any' type
export const TYPE_INJECTION_TOKEN = new InjectionToken<new () => any>(
  'TYPE_INJECTION_TOKEN'
);

// Should this actually be a directive? Is there a need to call it explicitly?
@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  public object;

  constructor(_injector: Injector) {
    const factory = _injector.get(TYPE_INJECTION_TOKEN);

    this.object = new factory();
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    {
      provide: TYPE_INJECTION_TOKEN,
      useValue: function () {}, // This serves as the constructor function
    },
  ],
})
export class AppComponent extends MyComponent {
  constructor(_injector: Injector) {
    super(_injector);
  }
}

Answer 3

Answer №2

I decided to award the individual above with the check because their response aligned perfectly with my query. Although, as mentioned by some commentators, it falls short when dealing with a scenario where a component superclass requires Angular features (such as @ViewChild). Given that I utilize Angular features in my work, I had to come up with an alternative resolution:

constructor(@Inject(null) protected type1 : new () => Class1) 
{ 
    this.object = new this.type1();
}

It appears that @Inject(null) is adequate in indicating to Angular not to perform any injections, resulting in the compiler no longer generating errors.

Answer 4

I decided to award the individual above with the check because their response aligned perfectly with my query. Although, as mentioned by some commentators, it falls short when dealing with a scenario where a component superclass requires Angular features (such as @ViewChild). Given that I utilize Angular features in my work, I had to come up with an alternative resolution:

constructor(@Inject(null) protected type1 : new () => Class1) 
{ 
    this.object = new this.type1();
}

It appears that @Inject(null) is adequate in indicating to Angular not to perform any injections, resulting in the compiler no longer generating errors.

What is the process for disabling dependency injection in an Angular component?

Answer №1

Answer №2

Similar questions

Is there a function return type that corresponds to the parameter types when the spread operator is used?

What is causing certain code to be unable to iterate over values in a map in TypeScript?

What sets aws-cdk-lib apart from @aws-cdk/core, @aws-cdk/aws-iam, and others?

Guard against an array that contains different data types

Executing a for loop concurrently by utilizing async/await promises

Is it possible to create two subclasses where the methods return the types of each other?

JavaScript - Persistent memory retention issues

How to implement dependency injection in CompositeControl with Ninject

What is the best way to trigger an API call whenever a variable is updated?

There is no overload that matches this call in Next.js/Typescript

Both radio buttons are being chosen simultaneously

Embarking on a fresh XR experience

What is the best way to enforce input requirements in Typescript?

The drop down list does not support the 'click' function and is throwing a TypeError

What is the method for adjusting the time format?

Application suddenly crashes due to a severe issue: FATAL EXCEPTION: java.lang.RuntimeException, preventing the activity from starting

Encountering a surprise token < while processing JSON with ASP.NET MVC alongside Angular

Angular 5: Sharing a Singleton Service Across Components in a Lazily Loaded Feature Module

Enhancing the appearance of div content in Angular by utilizing local template variables and material elements

What is the process for defining the type of the context for an Apollo resolver?