How to assign a context to a base class in Angular (with TypeScript)?

Question

Angular

Here is my base component:

// VirtualComponent.ts
export class VirtualComponent implements OnInit, OnDestroy, AfterContentInit, AfterViewInit { 

constructor(public ref: ChangeDetectorRef,
                public zone: NgZone,
                public route: ActivatedRoute,
                public router: Router,
                public applicationRef: ApplicationRef) {

}

// .. методы для вызова change detection

}

This is how I create ordinary components, as it turned out, this is not very convenient due to the fact that each component must now contain the same parameters as the parent constructor

// step-list.component.ts
@Component({
    // ..
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StepComponent extends VirtualComponent {

    constructor(public appState: AppState,
                public dataService: DataService,
                private titleService: Title,
                public ref: ChangeDetectorRef,
                public zone: NgZone,
                public route: ActivatedRoute,
                public router: Router,
                public applicationRef: ApplicationRef
    ) {
       super(appState, ref, zone, route, router, applicationRef);
   }


}

At first I was not too lazy to write, but now it’s completely inconvenient, if I change the constructor of the parent class, then for each component class I need to make changes to pass new parameters to super
I first tried to make it simpler

export class VirtualContext {

constructor(public ref: ChangeDetectorRef,
                public zone: NgZone,
                public route: ActivatedRoute,
                public router: Router,
                public applicationRef: ApplicationRef) {

}

}

export class VirtualComponent implements OnInit, OnDestroy, AfterContentInit, AfterViewInit { 

  public ref: ChangeDetectorRef;
  public zone: NgZone;
  // ..

constructor(public virtualContext: VirtualContext) {

 this.ref = virtualContext.ref;
 this.zone = virtualContext.zone;
 // ..

}

// .. методы для вызова change detection

}

and then in normal components I had to do this:

// step-list.component.ts
@Component({
    // ..
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StepComponent extends VirtualComponent {

    constructor(public appState: AppState,
                public dataService: DataService,
                private titleService: Title,
                public virtualContext: VirtualContext
    ) {
       super(virtualContext);
   }


}

That is, any change in the parent class constructor would not lead to changes that I should make to the main components.
But such an idea turned out to be unviable:
1. Angular began to swear that VirtualContext no provide, well, that is, there are problems with Dependence Injection
2. I added in @NgModule in provides [VirtualContext]
3. But he began to swear that now ChangeDetectorRef no provide, and when I began to add to @NgModule in provides [VirtualContext, ChangeDetectorRef, ..]
4. Then TypeScript began to swear, that they don't have a type to inject all that goodness
In general, tell me what should I do so that I do not constantly pass a bunch of parameters to the parent class constructor and do not depend on changes in the base class constructor?

Answer 1

So far I've only found this:

http://stackoverflow.com/questions/39038791/inheritance-and-dependency-injection