Hey everyone, I recently upgraded my Angular to version 13 and I'm facing some issues with DI. Whenever I call the
ReflectiveInjector.resolveAndCreate()ScheduleProvider, which is decorated with @Injectable() and injected into my pro-container.js file.
Here are the relevant segments:
schedule-provider.js
import { Injectable } from 'injection-js';
import { MzpackgHttpService, MzpackgLightResource, MzpackgListFilter } from 'mzpackg-api-schedules';
@Injectable()
export class ScheduleProvider {
public schedule= {
/*
some data
*/
};
public constructor(private readonly mzPackgHttpService: MzpackgHttpService) {}
}
pro-container.js
import { InjectionToken, Provider, ReflectiveInjector } from 'injection-js';
import {
RolesPartiesHttpService,
HttpService,
} from 'mzpackg-api-roles';
import {PaymentsHttpService } from 'mzpackg-api-payments';
import { LawHttpService } from 'mzpackg-api-law';
import {
TasksHttpService,
} from 'mzpackg-api-tasks';
import { BrokersHttpService } from 'mzpackg-api-brokers';
import {
HttpService as ExtendedPaymentHttpService
} from 'mzpackg-api-extpayments';
import { ScheduleProvider } from './schedule-provider';
export const BROKERS_HTTP_SERVICE = new InjectionToken<HttpService>('broker http service');
export const PAYMENTS_HTTP_SERVICE = new InjectionToken<ExtendedPaymentHttpService>('payments http service');
export class ProContainer{
private readonly providers: Provider[];
public constructor() {
this.providers = [
{
provide: BrokersHttpService,
useFactory: (httpService: HttpService) => new BrokersHttpService(httpService),
deps: [BROKERS_HTTP_SERVICE]
},
{
provide: PaymentsHttpService,
useFactory: (httpService: HttpService) => new PaymentsHttpService(httpService),
deps: [PAYMENTS_HTTP_SERVICE]
},
{
provide: ScheduleProvider,
useFactory: (tasksHttpService: TasksHttpService) => new
ScheduleProvider(tasksHttpService),
deps: [TasksHttpService, RolesPartiesHttpService, LawHttpService]
},
];
}
}
The issue seems to arise when I comment out ScheduleProvider; everything works fine then. It appears that ScheduleProvider is causing the undefined error. My Angular package versions are as follows:
@angular-devkit/architect 0.1302.6
@angular-devkit/build-angular 13.2.6
@angular-devkit/core 13.2.6
@angular-devkit/schematics 13.2.6
@angular/cdk 13.2.6
@angular/cli 13.2.6
@angular/compiler-cli 13.2.6
@angular/language-service 13.2.6
@angular/material 13.2.6
@schematics/angular 13.2.6
rxjs 6.6.7
typescript 4.5.5
Any assistance would be greatly appreciated.