CODEWITHSUNDEEP
angulartypescript
netdjw
netdjw

Reputation: 6007

Angular 10.1 "This constructor was not compatible with Dependency Injection."

In my project I try to move the spinner service out from my components and now I get Error: This constructor was not compatible with Dependency Injection. message. But the VSCode linter don't say anything.

The full error message is this:

Error: This constructor was not compatible with Dependency Injection.
    at Module.ɵɵinvalidFactory (core.js:14675)
    at Object.AppDataService_Factory [as factory] (app-data.service.ts:36)
    at R3Injector.hydrate (core.js:11289)
    at R3Injector.get (core.js:11111)
    at NgModuleRef$1.get (core.js:24243)
    at R3Injector.get (core.js:11122)
    at NgModuleRef$1.get (core.js:24243)
    at Object.get (core.js:22142)
    at getOrCreateInjectable (core.js:4079)
    at Module.ɵɵdirectiveInject (core.js:14651)

...but the app-data.service.ts:36 is only the end of a function. (Below I marked it.)

The banner.component.ts file:

@Component({
  selector: 'app-banner-list',
  templateUrl: './banner-list.component.html',
  styleUrls: ['./banner-list.component.scss']
})
export class BannerListComponent extends BaseListComponent<BannerInterface> implements OnInit, OnDestroy {
  constructor(
    private appDataService: AppDataService<BannerInterface>,
    private helpreService: HelperService,
  ) {
    super(Banner);
  }

  // ...

  loadDatas(): Observable<any> {
    // create observable function
    const getAll$ = this.appDataService.proxy.getAll().pipe(
      map((result: any) => {
        // ...
      }),
    );

    return this.appDataService.start(getAll$, 'banner getAll');
  }
}

The app-data.service.ts file:

@Injectable({
  providedIn: 'root'
})
export class AppDataService<T extends BaseModelInterface<T>> {
  private spinner: SpinnerServiceInterface = AppModule.InjectorInstance.get(SpinnerService);
  proxy: ProxyServiceInterface<T> = new ProxyService(this.model);

  constructor(
    private model: T,
  ) { }

  start(pipeInstance: Observable<any>, spinnerName: string = 'spinner'): Observable<any> {
    return of(1).pipe(
      // switch on spinner
      tap(() => this.spinner.on(spinnerName)),

      // run observable pipe instance
      switchMap(() => pipeInstance),

      // switch off spinner
      tap(() => this.spinner.off(spinnerName)),
    );
  } // <--------- this is the 36. line
}

The ProxyService is from the ddata-core package, but this is the constructor:

@Injectable()
export class ProxyService<T extends BaseModelInterface<T>> extends DataServiceAbstract<T> {
  private type: new () => T;

  constructor(
    private instance: T,
  ) {
    super(instance);
    // ...
  }

  getAll(pageNumber: number = 0): Observable<any> {
    // ...
  }
}

I'm stucked with this. Any idea where should I looking the solution of his constructor was not compatible with Dependency Injection ?

Upvotes: 1

Views: 7097

Answers (2)

Juri Sinitson
Juri Sinitson

Reputation: 1635

The same problem because the super() call was forgotten in the inheriting class. Make sure not to forget it.

@Injectable({ providedIn: 'root' })
@StoreConfig({ name: fictive })
class FictiveStore extends AppModelStore {
  // !!!!!!!!!!!!! Forgotten to put that here
  constructor() {
    super();
  }
}

export abstract class AppModelStore extends Store {
  constructor() {
    // Initial state
    super(initial);
  }
}

Upvotes: 0

HTN
HTN

Reputation: 3604

By using @Injectable({ providedIn: 'root' }), you are telling Angular to create an instance of your AppDataService to add it in the Root module's provider. However, it does not know how to create this instance with your constructor, as it cannot inject a T instance for the model.

Upvotes: 1

Related Questions