Can't load Transloco i18n files

[BenLune]

Please provide the environment you discovered this bug in.

serve command "nx": "16.8.0" "@angular/core": "16.2.3" "@analogjs/platform": "^0.2.0" "@analogjs/vite-plugin-angular": "^0.2.0"

Which area/package is the issue in?

Don't know / other

Description

I try to load transloco i18n files, but I have an unknown error (status 0). I load them from my assets folder, and as I understand, in SSG mode, we need to load those files with an absolute url, I hard coded the host, to test :

import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Translation, TranslocoLoader } from '@ngneat/transloco';

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  private http = inject(HttpClient);

  getTranslation(lang: string) {
    return this.http.get<Translation>(
      `http://localhost:5173/assets/i18n/${lang}.json`
    );
  }
}

In the terminal, I have the error, with the link ('http://localhost:5173/assets/i18n/en.json') which was in error, but when I click on the link, I can access to the file in the browser. I don't understand how to solve that...

I need also to load svg spritesheet for angular material (MatIcon), but I don't know understand yet how to get the hostname while server rendering...

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [ ] No

[luishcastroc]

did you configure transloco to run SSR? it should add the path to the environment (maybe a dumb question since it seems you have a custom port in there), for me is working fine, can you show your transloco provider?

[BenLune]

Hi @luishcastroc, Thanks for your answer. It seems I may have a specific problem due to my project. I'm working on an existing project and try to add Analog, and it seems to create strange problems... I tried it on a simpler project. And it almost works for me, in serve mode, yes, but not in build mode. I use AnalogJS to finally make SSG not SSR. I try to solve the problem with @brandonroberts , we discuss about it on Discord @brandonroberts created an Analog Transloco test project I checked also this Transloco SSR project The baseUrl is hard coded in environment file. I think I need to understand how to set the port when Server Side rendering and it will be ok. Have a nice day!

[brandonroberts]

@BenLune can we consider this one resolved?

[Smip]

I had the same error. I have fixed it by changing the path in the loader:

 getTranslation(lang: string) {
    return this.http.get<Translation>(
      `http://localhost:5173/i18n/${lang}.json`
    );
  }

[alfredarcifa]

People I have an issue with Transloco. When I use pipe | transloco in a .page file I have an error in Angular console, but the pipe works (in a .component file I don't have the error below):

ERROR RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at https://angular.io/errors/NG0203 at injectInjectorOnly

Someone can help me?

[luishcastroc]

People I have an issue with Transloco.

When I use pipe | transloco in a .page file I have an error in Angular console, but the pipe works (in a .component file I don't have the error below):

_ERROR RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at

https://angular.io/errors/NG0203

at injectInjectorOnly_

Someone can help me?

Any code example? Or is the one with the issue enough?

[alfredarcifa]

@luishcastroc thanks for response.

There is no code example, I integrated the plugin as per the manual and inserted it into the app. In the .page files, I get an error. The strange thing is that another translation plugin has the same error (ngx translator).

[luishcastroc]

@luishcastroc thanks for response.

There is no code example, I integrated the plugin as per the manual and inserted it into the app. In the .page files, I get an error. The strange thing is that another translation plugin has the same error (ngx translator).

I integrate transloco in my blog check if something in there can help you but it sounds like an injection issue which is weird

https://github.com/luishcastroc/blog

[alfredarcifa]

@luishcastroc thanks for response. There is no code example, I integrated the plugin as per the manual and inserted it into the app. In the .page files, I get an error. The strange thing is that another translation plugin has the same error (ngx translator).

I integrate transloco in my blog check if something in there can help you but it sounds like an injection issue which is weird

https://github.com/luishcastroc/blog

I saw your blog repo. Good work. I tried to see if there were any differences. I can do a further check. Thanks

[brandonroberts]

If you're using SSR, its likely you need to add it here

https://analogjs.org/docs/features/server/server-side-rendering#transforming-packages-for-ssr-compatibility

[alfredarcifa]

If you're using SSR, its likely you need to add it here

https://analogjs.org/docs/features/server/server-side-rendering#transforming-packages-for-ssr-compatibility

OK Brandon, thanks. I will try. I already have other plugins in noExternal, I will add Transloco.

ssr: {
    noExternal: [
      'ag-grid-community',
      'ag-grid-angular'
    ],
  },

[brandonroberts]

By chance, are you using the new Transloco org that's not under @ngneat anymore?

[alfredarcifa]

By chance, are you using the new Transloco org that's not under @ngneat anymore?

The new: jsverse.

I have a new error when I put @jsverse/transloco in vite.config.js

ERROR RuntimeError: NG0200: Circular dependency in DI detected for InjectionToken HTTP_INTERCEPTORS.

[brandonroberts]

Ok. Try using @jsverse/** instead of just @jsverse/transloco

[alfredarcifa]

Ok. Try using @jsverse/** instead of just @jsverse/transloco

Nothing to be done. The error remains in the server console

[brandonroberts]

Got it. If you can open a new issue with a reproduction, that would be great.

Here's a StackBlitz link https://analogjs.org/new

[alfredarcifa]

Got it. If you can open a new issue with a reproduction, that would be great.

Here's a StackBlitz link https://analogjs.org/new

OK Brandon, as soon as I can I will upload it to StackBlitz.

Thanks for the support