build: add i18n support

package-lock.json

@@ -17,6 +17,8 @@
         "@angular/platform-browser": "^21.0.0",
         "@angular/router": "^21.0.0",
         "@angular/service-worker": "^21.0.6",
+        "@ngx-translate/core": "^17.0.0",
+        "@ngx-translate/http-loader": "^17.0.0",
         "angular-web-sqlite": "^1.0.34",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0"
@@ -2698,6 +2700,32 @@
         "@tybys/wasm-util": "^0.10.1"
       }
     },
+    "node_modules/@ngx-translate/core": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-17.0.0.tgz",
+      "integrity": "sha512-Rft2D5ns2pq4orLZjEtx1uhNuEBerUdpFUG1IcqtGuipj6SavgB8SkxtNQALNDA+EVlvsNCCjC2ewZVtUeN6rg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=16",
+        "@angular/core": ">=16"
+      }
+    },
+    "node_modules/@ngx-translate/http-loader": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-17.0.0.tgz",
+      "integrity": "sha512-hgS8sa0ARjH9ll3PhkLTufeVXNI2DNR2uFKDhBgq13siUXzzVr/a31M6zgecrtwbA34iaBV01hsTMbMS8V7iIw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=16",
+        "@angular/core": ">=16"
+      }
+    },
     "node_modules/@npmcli/agent": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-4.0.0.tgz",

package.json

@@ -32,6 +32,8 @@
     "@angular/platform-browser": "^21.0.0",
     "@angular/router": "^21.0.0",
     "@angular/service-worker": "^21.0.6",
+    "@ngx-translate/core": "^17.0.0",
+    "@ngx-translate/http-loader": "^17.0.0",
     "angular-web-sqlite": "^1.0.34",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"

src/app/app.config.ts

@@ -11,6 +11,8 @@ import { WebSqlite } from 'angular-web-sqlite';
 import { Sqlite } from './services/sqlite';
 import { tables } from '../migrations/20260117';
 import { provideServiceWorker } from '@angular/service-worker';
+import {provideTranslateService } from "@ngx-translate/core";
+import {provideTranslateHttpLoader} from "@ngx-translate/http-loader";
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -28,5 +30,13 @@ export const appConfig: ApplicationConfig = {
       enabled: !isDevMode(),
       registrationStrategy: 'registerWhenStable:30000',
     }),
+    provideTranslateService({
+      loader: provideTranslateHttpLoader({
+        prefix: '/i18n/',
+        suffix: '.json'
+      }),
+      fallbackLang: 'en',
+      lang: 'en'
+    })
   ],
 };

src/app/app.ts

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,11 @@ import { RouterOutlet } from '@angular/router';
   templateUrl: './app.html',
   styles: [],
 })
-export class App {}
+export class App {
+  private readonly translate = inject(TranslateService);
+  constructor() {
+        this.translate.addLangs(['en', 'es', 'pt']);
+        this.translate.setFallbackLang('en');
+        this.translate.use('en');
+    }
+}