Aangular, SSR, ngx-translate | Angular Community | Page 1

glad yacht Feb 13, 2025, 10:28 AM

#

Hello,
I'm trying to create an Angular SSR (v18) application using the ngx-translate module. I'm keeping the language as the first segment in the URL, e.g., "/en/...". When the application starts, the en.json file is already stored in the ng-state (which is what we want), but if I navigate directly to a different language version, such as fr, the fr translations are not present in the ng-state.

I've tried various ways to pass the language from the server to the client, but it seems that I should somehow generate separate versions for each language. However, I'm not sure how to do that.

abstract furnace Feb 13, 2025, 10:31 AM

#

If you want to generate separate applications then the built in I18n support for Angular is what you want, as it operates exactly this way.
ngx-translate allows you to specify how to load a specific language using the TranslateLoader: https://ngx-translate.org/reference/translate-loader-api/
You're going to have to write some code that can load the translations over HTTP in case the user changes language after already loading the app.

glad yacht Feb 13, 2025, 10:36 AM

#

I want to achieve a state where, when I visit a page with /en/..., the translations are already provided by the server. However, this only happens for "en" and not for other languages. Can this be solved with the ngx-translate module?

abstract furnace Feb 13, 2025, 10:37 AM

#

How are you providing the languages on the server currently?

magic crescent Feb 18, 2025, 6:25 PM

#

Commenting to stay updated on this issue, cause im having the same problem.

glad yacht Feb 20, 2025, 2:05 PM

#

Routing module

  // Redirect if we don't know lang
  { path: '', redirectTo: '/nl', pathMatch: 'full' },
  {
    path: ':lang',  // Capture the language as the first segment
    component: TranslateWrapperComponent, // Component for set current lang
    children: [
      // Homepage
      { path: '', component: HomeComponent, pathMatch: 'full' },
    ]
   }
   { path: '**', redirectTo: '/nl' }

Translate Wrapper Component

// HTML
<router-outlet />

// TS
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-translate-wrapper',
  templateUrl: './translate-wrapper.component.html',
  styleUrl: './translate-wrapper.component.scss'
})
export class TranslateWrapperComponent implements OnInit {
  constructor(private route: ActivatedRoute, private translate: TranslateService) {}

  ngOnInit() {
    this.route.params.subscribe(p => {
      this.translate.use(p['lang']); // Set lang
    })
  }
}

@magic crescent

#Aangular, SSR, ngx-translate