I am facing an issue in my project where I attempted to move the spinner service out from my components. Now, I am encountering an error message that says
Error: This constructor was not compatible with Dependency Injection.
. Surprisingly, the VSCode linter is not providing any hints or warnings.
The detailed error message reads as follows:
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)
However, it seems like the app-data.service.ts:36
reference is only pointing to the end of a function. (I have highlighted it below.)
In 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');
}
}
Regarding 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
being used is part of the ddata-core
package, and here is its 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 am currently stuck at resolving this issue. Does anyone have any suggestions on where to find a solution for
this constructor was not compatible with Dependency Injection
? Any input would be greatly appreciated.