Localization & I18n

Relevant source files

The following files were used as context for generating this wiki page:

• marketplace-frontend/src/assets/i18n/en.json
• marketplace-frontend/src/app/services/missing-translation.service.ts
• marketplace-frontend/src/app/app.module.ts
• marketplace-frontend/package.json
• marketplace-frontend/src/app/components/market-header/market-header.component.html
• marketplace-frontend/src/app/components/market-footer/market-footer.component.html

The Localization and Internationalization (I18n) system enables the Marketplace application to support multiple languages and regional formats. It provides a centralized mechanism for managing user-facing strings, allowing the interface to adapt to different locales without changing application logic.

This system relies on the @ngx-translate library to load, manage, and inject translations into the user interface.

Core Architecture

The I18n architecture integrates with the Angular module system to provide translation services across the frontend.

Library Dependencies

The project utilizes specific packages to handle internationalization:

• @ngx-translate/core: Provides the main service, pipe, and directive to handle translations.
• @ngx-translate/http-loader: Facilitates loading translation files from the server via HTTP.

Sources: [marketplace-frontend/package.json:32-33](https://github.com/exportexe/marketplace/blob/5fb0a7a89e693fae4d25b9f007fadd2fcaaace46/marketplace-frontend/package.json#L32-L33)

Module Configuration

The AppModule initializes the translation system using the TranslateModule.forRoot method. The configuration includes:

1. Default Language: Set via environment.defaultLocale.
2. Loader: Uses HttpLoaderFactory to fetch JSON files from the assets directory.
3. Missing Translation Handling: Uses a custom MissingTranslationService to manage cases where keys are undefined.

Sources: [marketplace-frontend/src/app/app.module.ts:42-56](https://github.com/exportexe/marketplace/blob/5fb0a7a89e693fae4d25b9f007fadd2fcaaace46/marketplace-frontend/src/app/app.module.ts#L42-L56)

Localization Data Flow

The following diagram illustrates how translation strings move from static assets to the rendered UI.

The diagram shows the sequence from key definition in a template to resolution via the TranslateService and asset files.

Translation Assets

Translation strings reside in structured JSON files within the src/assets/i18n/ directory.

JSON Structure

Keys are organized into namespaces corresponding to components or modules. The system supports dynamic interpolation using double curly braces (e.g., {{userName}}).

Key Namespace	Description	Examples
market-header	UI elements for the top navigation bar	market-header.sign-in, market-header.title
sign-in-dialog	Form labels and validation messages for login	sign-in-dialog.password-label, sign-in-dialog.welcome
market-footer	Legal information and dynamic year display	market-footer.info

Sources: [marketplace-frontend/src/assets/i18n/en.json:1-45](https://github.com/exportexe/marketplace/blob/5fb0a7a89e693fae4d25b9f007fadd2fcaaace46/marketplace-frontend/src/assets/i18n/en.json#L1-L45)

Content Handling

The system handles plain text, ARIA labels for accessibility, and HTML content through the safeHtml pipe combined with the translation pipe.
Sources: [marketplace-frontend/src/app/components/market-header/market-header.component.html:5, 40](https://github.com/exportexe/marketplace/blob/5fb0a7a89e693fae4d25b9f007fadd2fcaaace46/marketplace-frontend/src/app/components/market-header/market-header.component.html#L5)

UI Integration and Implementation

Translation Pipe Usage

Components render translated content primarily through the translate pipe in HTML templates.

<button type="button">
    {{'market-header.sign-in' | translate}}
</button>

Sources: [marketplace-frontend/src/app/components/market-header/market-header.component.html:70-73](https://github.com/exportexe/marketplace/blob/5fb0a7a89e693fae4d25b9f007fadd2fcaaace46/marketplace-frontend/src/app/components/market-header/market-header.component.html#L70-L73)

Dynamic Interpolation

Values determined at runtime, such as user names or dates, are passed to the translation pipe as an object.

• Customer Info: {{ 'market-header.customer-info' | translate: {userName: customerInfo.userName} }}
• Footer Year: [innerHTML]="'market-footer.info' | translate: {year: _currentYear} | safeHtml"

Sources: [marketplace-frontend/src/app/components/market-header/market-header.component.html:30](https://github.com/exportexe/marketplace/blob/5fb0a7a89e693fae4d25b9f007fadd2fcaaace46/marketplace-frontend/src/app/components/market-header/market-header.component.html#L30), [marketplace-frontend/src/app/components/market-footer/market-footer.component.html:3](https://github.com/exportexe/marketplace/blob/5fb0a7a89e693fae4d25b9f007fadd2fcaaace46/marketplace-frontend/src/app/components/market-footer/market-footer.component.html#L3)

Language Selection

The MarketHeaderComponent provides a user interface for switching locales. It displays available languages in a menu and triggers the _changeLanguage(language) method when a selection is made.

Missing Translation Handling

The MissingTranslationService implements the MissingTranslationHandler interface. This service acts as a fallback mechanism. When the TranslateService cannot find a value for a requested key, it invokes this handler to provide a default value or log the discrepancy, preventing empty UI elements.
Sources: [marketplace-frontend/src/app/services/missing-translation.service.ts](https://github.com/exportexe/marketplace/blob/5fb0a7a89e693fae4d25b9f007fadd2fcaaace46/marketplace-frontend/src/app/services/missing-translation.service.ts), [marketplace-frontend/src/app/app.module.ts:52-55](https://github.com/exportexe/marketplace/blob/5fb0a7a89e693fae4d25b9f007fadd2fcaaace46/marketplace-frontend/src/app/app.module.ts#L52-L55)

The Localization & I18n system ensures the Marketplace application is accessible to users in their preferred language while maintaining a clean separation between UI content and application code.