Inheriting from an abstract class has issue with Dependency Injection

Question

I have a parent abstract class declared like the following :

import { Localization } from 'angular-l10n';
import { SomeModel} from '../../api/models/some-model';
import { SomeService } from '../../api/services/some.service';

export abstract class BaseComponent extends Localization implements OnInit {

  someModel: SomeModel[];

  constructor(
    protected someService: SomeService
  ) {
    super();
  }

  ngOnInit() {
    this.someService
      .getSomeModel()
      .pipe(take(1))
      .subscribe(ref => (this.someModel= ref), err => this.onError(err));
}

The Child class uses this parent like the following :

@Component({
  selector: 'some-child-component',
  templateUrl: './some-child.component.html',
  styleUrls: ['./some-child.component.scss'],
})
export class SomeChildComponent extends BaseComponent implements OnInit {

  constructor(
    protected someService: SomeService
  ) {
    super(someService)
  }


  ngOnInit() {
    super.ngOnInit();
  }
}

When I run ng serve --aot --preserve-symlinks, everything works fine. However, whenever I update any file, a hot reload updates the builded application, and an error is thrown.

Class BaseComponent in D:/some/path/components/base-component.ts extends from a Injectable in another compilation unit without duplicating the decorator Please add a Injectable or Pipe or Directive or Component or NgModule decorator to the class.

Here are the versions I use :

Angular CLI: 1.7.4
Node: 6.11.4
OS: win32 x64
Angular: 5.2.10
typescript: 2.6.2
webpack: 3.11.0

Any idea how I could make my inheritance work?

Answer 1

Localization is @Injectable, therefor BaseComponent (which extends Localization) needs @Injectable decorator. The error is pretty self explanatory