➕ add @angular/localize

Author: mckenziearts

angular.json

@@ -16,6 +16,15 @@
           "skipTests": true
         }
       },
+      "i18n": {
+        "sourceLocale": "fr-FR",
+        "locales": {
+          "en": {
+            "translation": "src/locales/messages.en-US.xlf",
+            "baseHref": "/en/"
+          }
+        }
+      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "admin",
@@ -66,6 +75,9 @@
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
+            },
+            "en": {
+              "localize": ["en"]
             }
           },
           "defaultConfiguration": "production"
@@ -78,6 +90,9 @@
             },
             "development": {
               "browserTarget": "admin-cpanel:build:development"
+            },
+            "en": {
+              "browserTarget": "admin-cpanel:build:development,en"
             }
           },
           "defaultConfiguration": "development"

package-lock.json

@@ -4,6 +4,8 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "start:en": "ng serve --configuration=en",
+    "extract": "ng extract-i18n --output-path src/locales",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
@@ -46,6 +48,7 @@
     "@angular-eslint/template-parser": "13.5.0",
     "@angular/cli": "~13.3.5",
     "@angular/compiler-cli": "~13.3.0",
+    "@angular/localize": "^13.3.11",
     "@ngx-env/builder": "^2.2.0",
     "@schematics/angular": "^14.2.2",
     "@types/jasmine": "~3.10.0",

package.json

@@ -1,3 +1,8 @@
+/**
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+ import '@angular/localize/init';
+
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.