Translation keys not extracted if service is not injected

[falu-edo]

I use Angular v19 and @vendure/ngx-translate-extract v9.1.0.

I have following file:

export class TestModel {
  testField: string | undefined = undefined;

  constructor() {}

  public test(translateService: TranslateService): void {
    this.testField = translateService.instant('test_key');
  }
}

ngx-translate-extract fails to extract the key "test_key". When I instantiate the translateService inside the constructor, the key gets extracted. So it seems like there's a problem when the translateService is only a reference.

[pmpak]

Hello @falu-edo,

The parser picks up the TranslateService only when provided by dependency injection, either via the constructor or the inject() function. However, for scenarios such as your example, you can use the marker function (_()), which is designed exactly for edge cases like this.

So in your example you can simply wrap the key with the marker function and then the parser should be able to pick it up:

import {TranslateService, _} from "@ngx-translate/core";

export class TestModel {
  testField: string | undefined = undefined;

  constructor() {}

  public test(translateService: TranslateService): void {
    this.testField = translateService.instant(_('test_key'));
  }
}

You can also see an example in the ngx-translate documentation:
https://ngx-translate.org/getting-started/translating-your-components/#using-translations-in-code

[falu-edo]

Thank you @pmpak,
I saw that option and it works. I don't like this solution very much because I think some keys easily get lost if you don't remember this case (we use the extract mechanism to get all the translations).
Do you know if this behavior

The parser picks up the TranslateService only when provided by dependency injection

will be fixed anytime soon?

[HerrDerb]

@pmpak as angular now discourages constructor injection, this usecase might now be more frequent.we did experience it as well, as the update schematics will do this automatically if only used in the constructor. So it would be very welcome to add support for this usecase, instead of relying on the marker "work around"

[pmpak]

@HerrDerb Angular discourages constructor injection in favor of the inject function. Both of these approaches are supported.

I did explore whether the parser could be extended to pick up TranslateService when it is provided as a method parameter. Unfortunately it is not really straightforward and even though I managed to make the parser to pick it up it had side effects and there were failing test cases.

I am not ruling out the implementation of this, but because of the risks it is very unlikely that it will come anytime soon. For the time being you can either use the marker function for cases outside the injection context, or provide the TranslateService as a class property (assuming you create a simple object and not an @Injectable) like so:

import {TranslateService} from '@ngx-translate/core';

export class TestModel {
  testField: string | undefined = undefined;

  constructor(private readonly translateService: TranslateService) {}

  public test(): void {
    this.testField = this.translateService.instant('test_key');
  }
}

// Within a service or component
private readonly translateService = inject(TranslateService);

readonly model = new TestModel(this.translateService)

[emreyavuz369]

I use Angular v20 and @vendure/ngx-translate-extract v10.1.3.

@Directive()
export abstract class BaseComponent{
translateService = inject(TranslateService);
}

@Component()
export class TypeComponent extends BaseComponent{
datas = [
            {
                id: 0,
                name: this.translateService.instant('meetingType.MAIN')
            },
            {
                id: 1,
                name: this.translateService.instant('meetingType.CHAINED')
            }
        ];
}

In this code above translateService works but extractor does not work.
If i inject translateService in component extractor works. How to fix it?

[pmpak]

@emreyavuz369It looks like the extractor isn't picking up the base class if it’s in the same file. Could you try moving BaseComponent to its own file as an interim workaround?