Questions tagged dependency-injection

Explore the latest questions and answers asked by our top developers.

Angular service injecting another service (both children of same abstract class) can’t access injected service’s methods ("reading undefined")

I have multiple services handling notably API requests for different resources. As they’re very similar, I created a parent abstract generic class like this: abstract class GenericService<T>{ foo(){ bar(); } abstract bar(); } But they’re also highly interconnected so I have a lot of them injected into others: class R1Service extends GenericService<R1>{ … bar(){/*do something*/}; […]

Angular Service Private Field not updating before next call

I have this Service @Injectable({ providedIn: ‘root’ }) export class HelpTextService { private baseUrl = ‘api/help-text’; private _helpTextsCache: HelpText[]; constructor(private http: HttpClient) { } async getHelpText(title: string): Promise<string> { if (!this._helpTextsCache) this._helpTextsCache = await this.http.get<HelpText[]>(this.baseUrl).toPromise(); return this._helpTextsCache?.find(h => h.title === title)?.text } } And this Directive which uses the service @Directive({ selector: ‘[helpTextTooltip]’ }) export […]

Same bootstrap Component on two modules

My app contains the following modules where I’ve the same component (AppComponent) as bootstrap. app.module.ts @NgModule({ declarations: [ AppComponent, MoreComponents ], imports: [BrowserModule, MoreModule], providers: [ ModulesService, MoreServices, ], entryComponents: [SomeComponent], bootstrap: [AppComponent, BarTopComponent], }) export class AppModule { } newApp.module.ts @NgModule({ declarations: [ AppComponent, MoreComponents ], imports: [ BrowserModule, MoreModule ], providers: [ ModulesService, […]

By JMarques
Categorized as angular, dependency-injection, module Tagged , ,

How to inject the right service depending on the context of UI?

I have a component that renders a list of users (it injects its related service called UserService) I have another component that renders a list of Products (inject its related service called ProductService) In each row of the previous lists, I have another component that renders a contextual button with a dropdown that displays a […]

Angular Dependency Injection does not work with Webpack

I’ve got an issue that Angular Dependency Injection does not work when I build the project with Webpack. I use Angular 13 and Webpack 5, I use the @Injectable decorator to mark a service class and pass it to a component constructor: @Injectable({ providedIn: ‘root’}) export class DITestService { constructor() { } getTitle(){ return "DI […]

Client of root injected service not instantiated if used in a service that is provided in a component

i am currently struggling with the following situation in a project i am working on: I have a CoreModule which provides a SessionService and takes care of the APP_INITIALIZER: export function initApp(initializer: AppInitializingService) { return () => new Promise<any>(async (resolve: any) => { await initializer.init(); resolve(); }); } @NgModule({ imports: [], declarations: [], providers: [ […]

By enbma
Categorized as angular, dependency-injection, typescript Tagged , ,

ReCaptchaV3Service Causing Circular dependency in DI detected for InjectionToken HTTP_INTERCEPTORS

I am trying to add x-recaptcha-token in my requests’ header by implement a request interceptor. I am using "ng-recaptcha": "^6.1.0". If I remove the ReCaptchaV3Service dependency from my interceptor, the app is running fine, other wise I am getting Error: NG0200: Circular dependency in DI detected for InjectionToken HTTP_INTERCEPTORS. This is my Interceptor: import { […]

How to inject services(local and api) based on differnt env’s(local & qa) in angular 13?

api-local.service.ts import { HttpClient, HttpHeaders } from ‘@angular/common/http’; import { LoginRequest } from ‘../login/login-request’; @Injectable({ providedIn: ‘root’ }) export class ApiLocalService { constructor(private httpClient: HttpClient) { } private headers = new HttpHeaders({ ‘Content-Type’: ‘application/json; charset=utf-8’, ‘Accept’: ‘application/json, text/plain’ }); userLoginLocal(){ console.log("inside LOCAL API service"); return this.httpClient.get(‘../assets/data/login.json’, {headers:this.headers}); } getUserListLocal(){ return this.httpClient.get(‘../assets/data/userList.json’ , { headers: this.headers […]

Angular resolver inject router

I defined a resolver in my Angular (v13) app to do some shenanigans with a wordpress backend. When the user accesses an URL I want the resolver to check post type and ID from wordpress and route accordingly (post list, single post, page, …). To do that I have injected Angular’s Router in my WordPressResolver […]

Is there any way to do stratergic loading of component at runtime in Angular?

I have this application where I do rest call to a server and receive a JSON response which contains the name of an particular UI setting. Let’s assume the data received from server is as follows, Response :- { "uiSetting" : "ui-type-one" } There can be multiple UI settings like ui-type-two, ui-type-three and so on. […]

1 23

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us