Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

06c: Use translations in TS code

See original GitHub issue

Use TranslateService in TS classes:

component’s implementations
Page Meta Resolvers (search files for phrase extends PageMetaResolver)
Http Error Handlers (search files for phrase extends HttpErrorHandler)
anything else you find

When posible, it would be good to firstly move hardcoded text from code to HTML template, and then to translate it using cxTranslate pipe. When it’s not possible, we have to use asynchronous TranslationService.translate method in the code.

Issue Analytics

State:
Created 4 years ago
Comments:8 (8 by maintainers)

Top GitHub Comments

1reaction

mirkosoftcommented, Apr 24, 2019

Changes has been pushed to feature/GH-1809_use-translations-in-TS branch. Few things came up during the work:

Global messaging needs additional handling for cases where message comes from the backend - we have to support both translated and hardcoded texts for adding a message. Will create a ticket for that.
Multistep checkout components are not touched as there is another epic for extensible checkout. Will check what is the best/smoother way of combining both streams of work.
<cx-card> and <cx-sorting> has been also equipped with cxTranslate but we need to ensure/handle situations where the input data come from backend (OrderHistoryListWsDTO.sorts). Also chceckout use those components (see above).
Page meta resolvers aren’t completed yet (didn’t found out yet how to translate those either in the UI or TS).

1reaction

mirkosoftcommented, Apr 23, 2019

Hardcoded string that has been founded so far in the TS files:

projects/core/src/global-message/http-interceptors/handlers/bad-gateway.handler.ts
projects/core/src/global-message/http-interceptors/handlers/bad-request.handler.ts
...
projects/core/src/store-finder/facade/store-data.service.ts
projects/core/src/user/store/effects/forgot-password.effect.ts
projects/core/src/user/store/effects/reset-password.effect.ts
projects/core/src/user/store/effects/user-addresses.effect.ts
projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/container/multi-step-checkout.component.ts
projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/payment-method/payment-method.component.ts
projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/review-submit/review-submit.component.ts
projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/shipping-address/address-form/address-form.component.ts
projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/shipping-address/shipping-address.component.ts
projects/storefrontlib/src/lib/checkout/components/order-confirmation/order-confirmation.component.ts
projects/storefrontlib/src/lib/my-account/order/order-details/order-detail-shipping/order-detail-shipping.component.ts
projects/storefrontlib/src/lib/my-account/order/order-history/order-history.component.ts
projects/storefrontlib/src/lib/my-account/update-email/update-email.component.ts
projects/storefrontlib/src/lib/my-account/payment-methods/components/payment-methods.component.ts
projects/storefrontlib/src/lib/my-account/update-password/components/update-password/update-password.component.ts
projects/storefrontlib/src/lib/my-account/update-profile/update-profile.component.ts
projects/storefrontlib/src/lib/product/components/product-list/container/product-list.component.ts
projects/storefrontlib/src/lib/pwa/services/add-to-home-screen.service.ts
projects/storefrontlib/src/lib/ui/images/missingProduct.ts
projects/storefrontlib/src/lib/user/register/register.component.ts
projects/storefrontlib/src/lib/cms-lib/breadcrumb/breadcrumb.component.ts

Top Results From Across the Web

06c: Use translations in TS code · Issue #1809 · SAP/spartacus

When posible, it would be good to firstly move hardcoded text from code to HTML template, and then to translate it using cxTranslate...

i18n Translate.instant with parameters - angular - Stack Overflow

1 Answer 1 · You are sure that your translation files are already loaded and don't need updates: translate.instant('key') · You are not...

XLIFF 1.2 Specification - OASIS Open

The translated text is contained in a <target> element that has the same inline codes available to it as does the <source> element....

Angular Localization - Unleash the full power of i18next - locize

You can add your translations either by importing the individual json files or via API or by using the CLI. npm install i18next-locize-backend....

Angular Internationalization

Extract text for translation into different languages; Format data for a specific locale ... Translated names including time zones, languages, and countries.