How to use new Angular 20 inject syntax with

Question

I'm using @Inject(String) to enable giving config at the instantiation of my service.

Here's the code:

const httpLoaderFactory: (http: HttpClient) => TranslateHttpLoader = (http: HttpClient) =>
    new TranslateHttpLoader(http, "./i18n/", ".json");

export const appConfig: ApplicationConfig = {
    providers: [
        provideHttpClient(),
        provideTranslateService({
            loader: {
                provide: TranslateLoader,
                useFactory: httpLoaderFactory,
                deps: [HttpClient],
            },
        }),
    ],
};

And this is the constructor of my TranslateHTTPLoader class:

constructor(
    private http: HttpClient,
    @Inject(String) public prefix = "/assets/i18n/",
    @Inject(String) public suffix = ".json",
) {}

Angular 20 ESLint now wants me to write it as follows:

http = inject(HttpClient)

But this won't take the element from the constructor. Is it a way of doing it properly?

I'm already disabling the ESLint errors using:

// eslint-disable-next-line @angular-eslint/prefer-inject
private http: HttpClient,

Andrei · Accepted Answer · 2025-07-07 15:56:06Z

2

first: @Inject(String) makes almost zero sense. it means you are trying to inject something provided with a token String and that is most likely not provided, or if someone did, then it is most likely something stupid.

second: you can make use of DI with the help of inject and some other parameters that are not provided in the DI as constructor params and have these both things on your class simultaniously

private http = inject(HttpClient);
constructor(
    public prefix = "/assets/i18n/", // not sure why you want defaults if you are passing them in the factory anyway
    public suffix = ".json",
) {}



export const appConfig: ApplicationConfig = {
    providers: [
        provideTranslateService({
            loader: {
                provide: TranslateLoader,
 // factory is called inside of an injection context. that means that "inject" will work
                useFactory: () => new TranslateHttpLoader("./i18n/", ".json"),
            },
        }),
    ],
};

answered Jul 7 at 15:56

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Raphaël Balet Jul 7 at 17:03

Thx for the response, but either way if I remove the @Inject(string), which somehow I though to be obligated, I still get the following error : Prefer using the inject() function over constructor parameter injection. Do you understand the reason why ?

Andrei Jul 7 at 17:21

hmm, not sure. did you take http =... line from the constructor to be just a class field definition? just normal constructor parameters are supposed to be same as the last example in their "valid code examples". github.com/angular-eslint/angular-eslint/blob/main/packages/…

Raphaël Balet Jul 8 at 6:51

Ok, your's approach seems to be correct, but the actual state of angular-esLint make that this isn't... : github.com/angular-eslint/angular-eslint/issues/2539. Does this work on your codebase, do you have the latest angular version installed ?

Eliseo · Accepted Answer · 2025-07-08 06:07:09Z

0

I feel you forgot add the provideHttpClient

export const appConfig: ApplicationConfig = {
    providers: [
        provideHttpClient(), //<--add this
        provideTranslateService({
            loader: {
                provide: TranslateLoader,
                useFactory: () => new TranslateHttpLoader("./i18n/", ".json"),
            },
        }),
    ],
};

answered Jul 8 at 6:07

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

1 Comment

Raphaël Balet Jul 8 at 6:30

Hey, thx for your answer, but I did not, I just stripped the code to only show the important information, but I'll add it back in case it makes the question less understandable

Collectives™ on Stack Overflow

How to use new Angular 20 inject syntax with

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related