feat: add and configure @angular/localize

Author: dominicbachmann

angular.json

@@ -13,13 +13,28 @@
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
+      "i18n": {
+        "sourceLocale": {
+          "code": "en",
+          "subPath": ""
+        },
+        "locales": {
+          "de": {
+            "translation": "src/locale/messages.de.json"
+          },
+          "fr": {
+            "translation": "src/locale/messages.fr.json"
+          }
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular/build:application",
           "options": {
             "browser": "src/main.ts",
             "index": "src/indexDefault.html",
             "tsConfig": "tsconfig.app.json",
+            "localize": true,
             "assets": [
               {
                 "glob": "**/*",
@@ -31,7 +46,10 @@
             "outputMode": "server",
             "ssr": {
               "entry": "src/server.ts"
-            }
+            },
+            "polyfills": [
+              "@angular/localize/init"
+            ]
           },
           "configurations": {
             "production": {
@@ -82,7 +100,12 @@
                 "input": "public"
               }
             ],
-            "styles": ["src/styles.css"]
+            "styles": [
+              "src/styles.css"
+            ],
+            "polyfills": [
+              "@angular/localize/init"
+            ]
           }
         }
       }

messages.json

@@ -0,0 +1,36 @@
+{
+  "locale": "en",
+  "translations": {
+    "5729418620241283277": "Events",
+    "4282290715877032507": "Organizers",
+    "5481284030283031915": "Website",
+    "8585369201408386550": " Join the community ",
+    "635264773021131084": " Starting from ",
+    "7097963028377891250": " To be announced ",
+    "457763919401259967": " Registration ",
+    "5891064527381218201": "Free",
+    "8291262399353359697": "Attendees",
+    "5260501588919384967": " Register now ",
+    "6364272713313334628": " No registration available ",
+    "926352149584380702": "Organized by",
+    "4862119345478890729": " Listen Now ",
+    "383604207727627418": "Try adjusting your search terms",
+    "6380110438893831255": "or browse all events above",
+    "6257229111292962180": "The Angular community hub for events, communities, and podcasts",
+    "6910865064463105075": "Communities",
+    "1984987229407697795": "Podcasts",
+    "3676011873566441889": "Curated list of Angular communities",
+    "1229359301315184889": "Curated list of Angular Events",
+    "3776293039808729401": "No events found",
+    "4118966711789506787": "We could not find any events matching your search criteria. Try different keywords or browse all available events.",
+    "8228704013073542414": "No upcoming events",
+    "5181869256727726277": "There are currently no upcoming Angular events scheduled. New events are added regularly, so please check back soon!",
+    "2104481506343485854": "Curated list of Angular Communities, Events, Podcasts, and Call for Papers.",
+    "8162118643101139148": "Developers interested in Angular and related technologies.",
+    "6829527508389756715": "Angular Events",
+    "8870711330013548872": "Online",
+    "6578397717654172779": "Page Not Found",
+    "1659745110459296080": "Go Back Home",
+    "5674307105789988119": "Curated list of Angular Talks"
+  }
+}

package.json

@@ -8,7 +8,9 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "serve:ssr:angular-hub": "node dist/angular-hub/server/server.mjs"
+    "serve:ssr:angular-hub": "node dist/angular-hub/server/server.mjs",
+    "i18n:extract": "ng extract-i18n --format json",
+    "i18n:merge-translations": "node ./scripts/merge-translations.js"
   },
   "private": true,
   "prettier": {
@@ -56,6 +58,7 @@
     "@angular/cli": "^20.0.5",
     "@angular/compiler-cli": "^20.0.5",
     "@angular/language-service": "18.2.0",
+    "@angular/localize": "20.0.6",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "husky": "^9.0.11",

pnpm-lock.yaml

@@ -0,0 +1,33 @@
+import { readFile, writeFile } from "node:fs/promises";
+import config from '../angular.json' with { type: 'json' };
+import messagesFile from '../messages.json' with { type: 'json' };
+
+const localesFilePaths = Object.values(config.projects["angular-hub"].i18n.locales).map((locale) => locale.translation);
+
+const messages = Object.entries(messagesFile.translations);
+
+const newLocales = await Promise.all(localesFilePaths.map(async (localeFilePath) => {
+  const localeFile = await readFile(localeFilePath, { encoding: 'utf-8' });
+
+  const localeFileData = JSON.parse(localeFile);
+
+  const updatedTranslations = messages.reduce((acc, [key, value]) => {
+    return {
+      ...acc,
+      [key]: key in localeFileData.translations ? localeFileData.translations[key] : value
+    }
+  }, {});
+
+  return {
+    file: localeFilePath,
+    data: {
+      ...localeFileData,
+      translations: updatedTranslations
+    }
+  };
+}));
+
+await Promise.all(newLocales.map(async (newLocale) => {
+  return writeFile(newLocale.file, JSON.stringify(newLocale.data, null, "\t"), { encoding: 'utf-8' })
+}))
+

scripts/merge-translations.js

@@ -32,7 +32,7 @@ import { Community } from '../../../models/community.model';
               class="text-sm hover:underline flex items-center gap-2"
             >
               <i class="pi pi-calendar text-2xl text-[#BF25B9]"></i>
-              <span>Events</span>
+              <span i18n>Events</span>
             </a>
           </li>
         }
@@ -44,7 +44,7 @@ import { Community } from '../../../models/community.model';
               class="text-sm hover:underline flex items-center gap-2"
             >
               <i class="pi pi-users text-2xl text-[#0077B5]"></i>
-              <span>Organizers</span>
+              <span i18n>Organizers</span>
             </a>
           </li>
         }
@@ -56,7 +56,7 @@ import { Community } from '../../../models/community.model';
               class="text-sm hover:underline flex items-center gap-2"
             >
               <i class="pi pi-globe text-2xl text-[#0077B5]"></i>
-              <span>Website</span>
+              <span i18n>Website</span>
             </a>
           </li>
         }
@@ -121,6 +121,7 @@ import { Community } from '../../../models/community.model';
           [href]="community().eventsUrl"
           target="_blank"
           class="w-full flex items-center justify-center text-sm bg-[#26A0D9] text-white p-2 rounded-lg"
+          i18n
         >
           Join the community
         </a>