Home/ Questions/Q 1648
Answered
Max
Asked: 2022-04-26T11:15:24+00:00

@Injectable giving undefined in angular 13

Hello guys I’ve recently updated angular to the version 13 and I’m experiencing some issues regarding DI. When I call the ReflectiveInjector.resolveAndCreate() function it gives me undefined error. What may be the possible reason behind this one guys, do you maybe know ? I’m having problems with ScheduleProvider which is decorated by @Injectable() and injected inside my pro-container.js file.

Here are the connected parts:

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 problem is when I comment ScheduleProvider it works, so ScheduleProvider is giving me undefined error. My angular packages versions are :

@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 help is highly appreciated.

angular
Share

1 Answer

  1. Best Answer

    The official docs days:

    Deprecated: from v5 – slow and brings in a lot of code, Use Injector.create instead.

    Usage (from official docs):

    const injector: Injector =
    Injector.create({providers: [{provide: 'validToken', useValue: 'Value'}]});
expect(injector.get('validToken')).toEqual('Value');
expect(() => injector.get('invalidToken')).toThrowError();
expect(injector.get('invalidToken', 'notFound')).toEqual('notFound');

    Injector returns itself when given Injector as a token:

    const injector = Injector.create({providers: []});
expect(injector.get(Injector)).toBe(injector);
    • 0

Leave an answer

You must login to add an answer.

Need An Account,