Picture from @JEONGUK unsplash.com

How to Effortlessly Translate Your Angular App Using ChatGPT

Simplify Angular i18n: Automate Translations with ChatGPT and @ngx-translate

Adding translations to your Angular app can be straightforward, especially with the help of advanced language models like ChatGPT. For those preferring an open-source alternative, Ollama is a great option. This tutorial will guide you through the process of setting up translation in your Angular app, including installing necessary packages, configuring your application, and using ChatGPT to streamline the translation process.

Step 1: Install Necessary Packages

Start by installing the required packages:

npm install @ngx-translate/core --save
npm install @@ngx-translate/http-loader --save

Step 2: Configure Your Angular App

Set up @ngx-translate/core to handle translations. First, create a loader function for translation files:

import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient} from "@angular/common/http";

export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    importProvidersFrom(
      TranslateModule.forRoot({
        defaultLanguage: 'de',
        loader: {
          provide: TranslateLoader,
          useFactory: createTranslateLoader,
          deps: [HttpClient],
        },
      })
    ),
  ]
};

Step 3: Create Translation Files

Create JSON files for each language in src/assets/i18n/.

German (de.json):

{
  "HELLO": "Hallo {{name}}"
}

English (en.json):

{
  "HELLO": "Hello, {{name}}!"
}

Step 4: Implement Basic Language Switching

Add buttons to switch between languages and set up the translation service in your component:

Component TypeScript (app.component.ts):

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TranslateModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  param: { name: string } = { name: 'World' };

  constructor(
      public translate: TranslateService
  ) {
    translate.setDefaultLang('de');
    translate.use('de');
  }

  changeLanguage(lang: string) {
    this.translate.use(lang);
  }
}

Component HTML (app.component.html):

<div>
  <button (click)="changeLanguage('de')">Deutsch</button>
  <button (click)="changeLanguage('en')">Englisch</button>
</div>

{{ 'HELLO' | translate:param }}

Step 5: Use ChatGPT for Translation

To streamline the translation process, use ChatGPT to extract text content from your Angular components and generate translation files. Here’s how you can do it:

Prompt for ChatGPT

Provide ChatGPT with a prompt to get your Angular component translated efficiently. For example:

I need to extract all text content from an Angular component's HTML that requires translation and convert it into a format suitable for i18n translation files. The output should include:
- **Updated HTML:** HTML content with translation IDs (placeholders) inserted.
- **Translation JSON:** JSON files for German (`de.json`) and English (`en.json`) with translation keys and their values.

Here is the original HTML:
<div>
  <h1>Welcome to My Application</h1>
  <p>Please login to continue</p>
</div>

Please provide:
1. Updated HTML with translation IDs in the format {{ 'TRANSLATION_ID' | translate }}.
2. JSON files for translations.

Example Output from ChatGPT

Updated HTML with Translation IDs:

<div>
  <h1>{{ 'WELCOME_HEADER' | translate }}</h1>
  <p>{{ 'LOGIN_PROMPT' | translate }}</p>
</div>

Translation JSON Files:

assets/i18n/de.json (German):

{
  "WELCOME_HEADER": "Willkommen in meiner Anwendung",
  "LOGIN_PROMPT": "Bitte melden Sie sich an, um fortzufahren"
}

assets/i18n/en.json (English):

{
  "WELCOME_HEADER": "Welcome to My Application",
  "LOGIN_PROMPT": "Please login to continue"
}

Summary

• Updated HTML: Replaced text content with translation IDs.
• Translation JSON: Provides translations for each ID in de.json and en.json.

This approach simplifies internationalizing your Angular app, ensuring that translation strings are well-organized and easily managed.

Note: Don’t forget to include TranslateModule in the imports of all your standalone components.

Known Problems (Corrections you might need to do)

Attribute Translation

Example 1

Original:

<button aria-label="Example icon-button with a menu"></button>

ChatGPT change will throw an error

✘ [ERROR] NG8002: Can’t bind to ‘aria-label’ since it isn’t a known property of ‘button’. [plugin angular-compiler]

<button aria-label="{{ 'MENU' | translate }}"></button>

Manual Correction:

<button [attr.aria-label]="'MENU' | translate"></button>

Example 2

Original

<img alt="My image" />

ChatGPT change will throw an error

✘ [ERROR] NG5002: Parser Error: Unexpected token ‘}’ at column 27 in [{{ ‘NO_IMAGE’ | translate }}] in

<img [attr.alt]="{{ 'NO_IMAGE' | translate }}" />

Manual Correction:

<img [attr.alt]="'NO_IMAGE' | translate" />

Short If

Original:

{{ isEditMode ? 'Bearbeiten' : 'Neuer' }} Empfänger

ChatGPT Change:

{{ isEditMode ? 'EDIT_MODE_TITLE' | translate : 'NEW_MODE_TITLE' | translate }}

Manual Correction:

{{ isEditMode ? ('EDIT_MODE_TITLE' | translate) : ('NEW_MODE_TITLE' | translate) }}