Translations are not enabled in Spartacus application

Question

I'm using Spartacus library for SAP Commerce storefront and I can't enable i18n features. Official documentation states that to get started you just need to add this configuration (https://sap.github.io/spartacus-docs/i18n/):

providers: [
  provideConfig({
    i18n: {
      resources: translations,
      chunks: translationChunksConfig,
    },
  }),
];

Though it's not said where you should add it, I'm assuming that it should go to the app.module.ts file into the @NgModule decorator. This is how app.module.ts file looks like in my case:

import { HttpClientModule } from "@angular/common/http";
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { EffectsModule } from "@ngrx/effects";
import { StoreModule } from "@ngrx/store";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomPdpModule } from "./custom-pdp/custom-pdp.module";
import { SpartacusModule } from './spartacus/spartacus.module';
import { provideConfig } from "@spartacus/core";
import { translationChunksConfig, translations } from "@spartacus/assets";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    StoreModule.forRoot({}),
    EffectsModule.forRoot([]),
    SpartacusModule,
    CustomPdpModule,
  ],
  providers: [
    provideConfig({
      i18n: {
        resources: translations,
        chunks: translationChunksConfig,
        fallbackLang: 'en',
      },
    }),
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I'm trying to use cxTranslate pipe in the custom module CustomPdpModule like this: {{ 'common.search' | cxTranslate }} On the storefront instead of translated string I see [common:common.search] and in the console the following warning:

Can someone point out, what I have done wrong so far or am I missing something important ?

Thank you.

Answer 1

if you would like to use cxTranslate pipe, make sure you import I18nModule from @spartacus/core and add it in the import section of your AppModule:

Here below is tips about trouble shooting i18n issues.

In my app.module.ts I use B2cStorefrontModule.withConfig to pass my application specific configuration. In Chrome Development Tool, I set breakpoint on line 82:

then in the runtime when the breakpoint is triggered, you can check in debugger, to inspect whether a given translation key, like "common.search" in your case exsts or not. If not exist, you will meet with error message mentioned in this thread.

I am testing based on Spartacus version 2.1 and I didn't find there is translation key "search" under common chunks, as see in highlighted area above.

I just manually added a custom translation key via:

function provideAdditionaLanguage(translations: TranslationResources) {
  translations["en"].common.common.jerrysearch = "Jerry Search";
  return translations;
}

and configure it in AppModule below:

Then consume it in my page:

final result，it works：

Best regards, Jerry