Can't seem to translate anything!

[tiagomoucho3]

Hello!

So, I followed the instructions but I couldn't get the routing translations to work...

I installed the packages as mentioned and followed the instructions as best as I could. This is currently my code:

app.routes.ts

export const appRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'cart',
    component: ShoppingCartComponent
    //outlet: 'shopping'
  },
  { path: '**', component: PageNotFoundComponent }
];

app.module.ts

import { appRoutes } from './app.routes';

// Normal Translations
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

// Router Translations
export function HttpLoaderFactory(
  translate: TranslateService,
  location: Location,
  settings: LocalizeRouterSettings,
  http: HttpClient
) {
  return new LocalizeRouterHttpLoader(
    translate,
    location,
    { ...settings, alwaysSetPrefix: true },
    http,
    '../assets/i18n/locales.json'
  );
}

...

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    }),
    RouterModule.forRoot(appRoutes),
    LocalizeRouterModule.forRoot(appRoutes, {
      parser: {
        provide: LocalizeParser,
        useFactory: HttpLoaderFactory,
        deps: [TranslateService, Location, LocalizeRouterSettings, HttpClient]
      }
    })
  ]
})

assets/i18n/locales.json

{
  "locales": ["pt", "en"]
}

assets/i18n/pt.json

{
  "CART": {
    "CART": "cesto",
    "BACK": "voltar",
    "QTY": "Quantidade",
    "TOTAL": "Total",
    "EMPTY": "O seu cesto encontra-se vazio!"
  },
  "ROUTES.home": "inicio",
  "ROUTES.cart": "cesto",
  "ROUTES.shopping": "compras"
}

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.addLangs(['pt', 'en']);
    translate.setDefaultLang('pt');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/pt/) ? browserLang : 'en');
  }
}

Common translations using ngx-translation work just fine, I get the cart strings translated. But my routes don't change. Also the prefix is always pt, even when I change my browser language to English and logging the browserLang variable prints 'en'.

Hope you guys could help me out.

Thanks in advance! Regards

[gilsdav]

Hello, Is your config path correct ? "../assets/i18n/locales.json", you "../" is really specific. You probably have a sub path on your server ? Can you try to add "prefix": "ROUTES." into your locales.json ? What are your Angular and ngx-translate-router versions ?

[tiagomoucho3]

Hi! It seems that the locales path was alright, but the problem was really the missing "prefix": "ROUTES." I added it and it's working now! 😄

Also, if you can look at my app.routes.ts, you can see that I have an unsused auxiliary route there (shopping:cart). I commented because he can't find that route. What I'm using is:

[routerLink]="['', { outlets: { shopping: ['cart'] } }] | localize"

Do I have to do any aditional configurations to get outlets working? My Angular version is 9.0.5, and ngx-translate-router version is 3.0.0 Thank you so much!

[gilsdav]

I have to investigate but currently multiple/specific outlets is not supported. I personally forbid its use in my teams. Did you try something like this ?

[routerLink]="[{ outlets: { shopping: (['cart'] | localize) } }]"

Does it work without this library ?

[tiagomoucho3]

I tried your alternative, but it did not work unfortunately :(

It did work without this library, but all in all, I prefer to have translated routes instead of outlets 😄

Thanks for your time!