TranslocoCurrenyPipe NullInjectorError

[amadeus-nplum]

Summary

Hi everyone,

I am currently trying to upgrade the Transloco version in our project. Previously we were on Transloco 4.3.0 and Transloco-MessageFormat 4.1.0.
The goal ist to upgrade them to the newest version (7).

As stated in the breaking changed for v5, I changes the way of providing, as the new way should be. See TranslocoRootModule:

As it stands, the TranslocoCurrenyPipe is working perfectly fine with in-template use. But in some occasions we also need to use the pipe within the ts file of a component or a service. Which worked perfectly fine before upgrading. See:

This implementation now leads to an Error being thrown in the Browser (Regarding the new standalone way?). See:

I know this is pretty few. I sadly can't get it done to build you guys sample project, since I am not able to set it up the same way, that it leads to the same error. I tried to, but failed along that way sadly.
Also it is not possible to share the whole project with you, due to some restrictions.

So this is more like a hail mary, hoping that you guys maybe see the issue from these informations as an act of desperation. Maybe you can help.
I can provide further information if needed.

Cheers
Noah

Additional information

No response

Create a reproduction

No response

[Marklb]

Since you are using an NgModule, I will assume your project does not bootstrap a standalone component. Storybook now bootstraps a standalone component, so there is not really a root NgModule. Before standalone components, Angular assumed you would use the root module correctly and only import your root providers in the root NgModule, but standalone apps are more strict about enforcing that. I am going to assume you already considered this or are doing something that this doesn't matter, based on the error that you showed.

Without more knowledge of your project, I can only make assumptions, but I will assume GoogleMapsService has @Injectable({ providedIn: 'root' }). I don't remember when the first ChangeDetectorRef is created, but I assume it would be with the first component and root providers are most likely initialized before that happens. That lifecycle may have been a little different before standalone components. If I keep messing with it, I could probably get this to work and be able to inject the Pipe, but it may end up being a workaround that is unnecessary overhead.

I don't think the library expects pipes to be used outside of a template, since pipes are a feature for templates. If you aren't initializing the pipe in a place that is guaranteed to call ngOnDestroy then you may be introducing a potential memory leak, since the pipe creates a subscription when initialized.

Could you instead inject TranslocoLocaleService and call this.localeService.localizeNumber(value, 'currency') directly, which is what the pipe is basically just a wrapper for?

I threw together a Stackblitz, from various snippets in their documentation. Since I don't use Transloco, I can't guarantee they are right, unless I do more testing. https://stackblitz.com/edit/github-yveuhs

[amadeus-nplum]

Thank you very much for this detailed answer!

All your assumptions are completely right & therefore also the usage of TranslocoLocaleService is working perfectly fine.
Thank you very much you saved my day!

Also it really helped me understanding how Standalone components really being handled & why the issue occured in the first place. Thank you very much for that too!