fix-i19minus1

itenium-socks/angular.json

@@ -13,6 +13,12 @@
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
+      "i18n": {
+        "sourceLocale": "en",
+        "locales": {
+          "nl": "src/locale/messages.nl.json"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:application",
@@ -23,6 +29,7 @@
             "polyfills": [
               "zone.js"
             ],
+            "localize":true,
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -58,6 +65,9 @@
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true
+            },
+            "nl": {
+              "localize": ["nl"]
             }
           },
           "defaultConfiguration": "production"
@@ -70,6 +80,9 @@
             },
             "development": {
               "buildTarget": "itenium-socks:build:development"
+            },
+            "nl": {
+              "buildTarget": "itenium-socks:build:nl"
             }
           },
           "defaultConfiguration": "development"

itenium-socks/package.json

@@ -15,6 +15,7 @@
     "@angular/compiler": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@angular/forms": "^18.0.0",
+    "@angular/localize": "~18.0.0",
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",

itenium-socks/src/app/layout/footer.component.html

@@ -3,43 +3,45 @@
     <div class="container">
       <div class="row">
         <div class="col-md-6 col-lg-3">
-          <h6>
+          <h6 i18n="@@footerAboutUsHeader">
             ABOUT US
           </h6>
-          <p>
+          <p i18n="@@footerAboutUsText">
             We're more than just a sock store - we're a celebration of your love for programming and technology.
             Founded by tech enthusiasts, our store is dedicated to bringing you a unique collection of socks that allow you to
             express your passion for coding and all things IT.
           </p>
         </div>
         <div class="col-md-6 col-lg-3">
           <div class="info_form">
-            <h5>
+            <h5 i18n="@@footerNewsletterHeader">
               Newsletter
             </h5>
             <form action="#">
-              <input type="email" placeholder="Enter your email">
-              <button>
+              <input type="email" i18n-placeholder="@@emailAdressPlaceholder" placeholder="Enter your email">
+              <button i18n="@@footerNewsletterSubscribeButton">
                 Subscribe
               </button>
             </form>
             <h6 style="text-align: center; margin-top: 46px;">
-              <a routerLink="/admin" style="color: white">Admin Module</a>
+              <a routerLink="/admin" style="color: white" i18n="@@footerAdminModuleLink">
+                Admin Module
+              </a>
             </h6>
           </div>
         </div>
         <div class="col-md-6 col-lg-3">
-          <h6>
+          <h6 i18n="@@footerNeedHelpHeader">
             NEED HELP
           </h6>
-          <p>
-          Our customer support team is available via phone or email.
-          Don't hesitate to reach out whenever you need assistance.
-          We're committed to providing you with the best sock-shopping experience possible.
+          <p i18n="@@footerNeedHelpText">
+            Our customer support team is available via phone or email.
+            Don't hesitate to reach out whenever you need assistance.
+            We're committed to providing you with the best sock-shopping experience possible.
           </p>
         </div>
         <div class="col-md-6 col-lg-3">
-          <h6>
+          <h6 i18n="@@footerContactUsHeader">
             CONTACT US
           </h6>
           <div class="info_link-box">
@@ -62,7 +64,7 @@ <h6>
   </div>
   <footer class="footer_section">
     <div class="container">
-      <p>
+      <p i18n="@@footerCopyright">
         &copy; {{ currentYear }} All Rights Reserved
       </p>
     </div>

itenium-socks/src/locale/messages.json

@@ -0,0 +1,15 @@
+{
+  "locale": "en-US",
+  "translations": {
+    "footerAboutUsHeader": " ABOUT US ",
+    "footerAboutUsText": " We're more than just a sock store - we're a celebration of your love for programming and technology. Founded by tech enthusiasts, our store is dedicated to bringing you a unique collection of socks that allow you to express your passion for coding and all things IT. ",
+    "footerNewsletterHeader": " Newsletter ",
+    "emailAdressPlaceholder": " Enter your email ",
+    "footerNewsletterSubscribeButton": " Subscribe ",
+    "footerAdminModuleLink": " Admin Module ",
+    "footerNeedHelpHeader": " NEED HELP ",
+    "footerNeedHelpText": " Our customer support team is available via phone or email. Don't hesitate to reach out whenever you need assistance. We're committed to providing you with the best sock-shopping experience possible. ",
+    "footerContactUsHeader": " CONTACT US ",
+    "footerCopyright": " © {$INTERPOLATION} All Rights Reserved "
+  }
+}

itenium-socks/src/locale/messages.nl.json

@@ -0,0 +1,15 @@
+{
+  "locale": "nl",
+  "translations": {
+    "footerAboutUsHeader": " Over Ons ",
+    "footerAboutUsText": " We zijn meer dan alleen een sokkenwinkel: we vieren jouw liefde voor programmeren en technologie. Onze winkel is opgericht door tech-enthousiastelingen en is erop gericht u een unieke collectie sokken te bieden waarmee u uw passie voor coderen en alles wat met IT te maken heeft, kunt uiten. ",
+    "footerNewsletterHeader": " Nieuwsbrief ",
+    "emailAdressPlaceholder": " Voer uw e-mailadres in ",
+    "footerNewsletterSubscribeButton": " Abonneer ",
+    "footerAdminModuleLink": " Admin Module ",
+    "footerNeedHelpHeader": " HULP NODIG ",
+    "footerNeedHelpText": " Ons klantenserviceteam is bereikbaar via telefoon of e-mail. Aarzel niet om contact op te nemen wanneer u hulp nodig heeft. Wij doen er alles aan om u de best mogelijke sokkenwinkelervaring te bieden. ",
+    "footerContactUsHeader": " CONTACTEER ONS ",
+    "footerCopyright": " © {$INTERPOLATION} Alle rechten voorbehouden "
+  }
+}

itenium-socks/src/main.ts

@@ -1,3 +1,5 @@
+/// <reference types="@angular/localize" />
+
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';

itenium-socks/tsconfig.app.json

@@ -3,7 +3,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "@angular/localize"
+    ]
   },
   "files": [
     "src/main.ts"

itenium-socks/tsconfig.spec.json

@@ -4,7 +4,8 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "jasmine",
+      "@angular/localize"
     ]
   },
   "include": [