BM5 Diff | 16c-i18n (von 16-guards)

angular.buildi18n.json ADDED Viewed

	@@ -0,0 +1,129 @@

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "book-monkey": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "bm",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/book-monkey",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": [],
+            "localize": true
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true,
+              "localize": ["en-US"]
+            },
+            "locale-de": {
+              "localize": ["de"]
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "book-monkey:build:production"
+            },
+            "development": {
+              "buildTarget": "book-monkey:build:development"
+            },
+            "development-de": {
+              "buildTarget": "book-monkey:build:development,locale-de"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
+        }
+      },
+      "i18n": {
+        "sourceLocale": "en-US",
+        "locales": {
+          "de": {
+            "translation": "messages.de.xlf"
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "schematicCollections": [
+      "angular-eslint"
+    ]
+  }
+}

angular.json CHANGED Viewed

@@ -27,7 +27,8 @@
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
-              "zone.js"
             ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
@@ -85,7 +86,8 @@
           "options": {
             "polyfills": [
               "zone.js",
-              "zone.js/testing"
             ],
             "tsConfig": "tsconfig.spec.json",
             "assets": [

             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
+              "zone.js",
+              "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
           "options": {
             "polyfills": [
               "zone.js",
+              "zone.js/testing",
+              "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.spec.json",
             "assets": [

package.json CHANGED Viewed

@@ -30,6 +30,7 @@
     "@angular-devkit/build-angular": "^19.1.1",
     "@angular/cli": "^19.1.1",
     "@angular/compiler-cli": "^19.1.0",
     "@types/jasmine": "~5.1.0",
     "angular-eslint": "19.0.2",
     "eslint": "^9.16.0",

     "@angular-devkit/build-angular": "^19.1.1",
     "@angular/cli": "^19.1.1",
     "@angular/compiler-cli": "^19.1.0",
+    "@angular/localize": "^19.1.1",
     "@types/jasmine": "~5.1.0",
     "angular-eslint": "19.0.2",
     "eslint": "^9.16.0",

public/messages.de.json ADDED Viewed

	@@ -0,0 +1,43 @@

+{
+  "locale": "de",
+  "translations": {
+    "BookCreateComponentTitle": "Buch anlegen",
+    "BookEditComponentTitle": "Buch bearbeiten",
+    "BookFormComponentLabelTitle": "Titel",
+    "BookFormComponentLabelSubtitle": "Untertitel",
+    "BookFormComponentLabelIsbn": "ISBN",
+    "BookFormComponentLabelAuthors": "Autorinnen/Autoren",
+    "BookFormComponentAddAuthor": " + Autorin/Autor ",
+    "BookFormComponentLabelDescription": "Beschreibung",
+    "BookFormComponentLabelPublished": "Veröffentlicht",
+    "BookFormComponentLabelThumbnail": "Vorschaubild URL",
+    "BookFormComponentSave": " Speichern ",
+    "BookFormComponentErrorTitleRequired": "Ein Titel muss angegeben werden.",
+    "BookFormComponentErrorIsbnRequired": "Eine ISBN muss angegeben werden.",
+    "BookFormComponentErrorIsbnFormat": "Die ISBN muss aus 10 oder 13 Zahlen bestehen.",
+    "BookFormComponentErrorIsbnExists": "DIe ISBN existiert bereits.",
+    "BookFormComponentErrorAtLeastOneAuthor": "Es muss mindestens ein Name angegeben werden.",
+    "AppComponentHome": "Startseite",
+    "AppComponentBooks": "Bücher",
+    "AppComponentAdmin": "Administration",
+    "AppComponentLogin": "Anmelden",
+    "AppComponentLogout": "Abmelden",
+    "BookDetailsComponentAuthors": "Autorinnen/Autoren",
+    "BookDetailsComponentIsbn": "ISBN",
+    "BookDetailsComponentPublished": "Veröffentlicht",
+    "BookDetailsComponentDescription": "Beschreibung",
+    "BookDetailsComponentAltCover": "Buchcover",
+    "BookDetailsComponentBackToList": "Zurück zur Liste",
+    "BookDetailsComponentRemove": " Buch entfernen ",
+    "BookDetailsComponentEdit": " Buch bearbeiten ",
+    "BookListItemComponentAltCover": "Buchcover",
+    "BookListItemComponentIsbn": "ISBN",
+    "BookListComponentTitle": "Bücher",
+    "BookListComponentNoBooks": " Keine Bücher verfügbar. ",
+    "HomeComponentTitle": "Startseite",
+    "HomeComponentBooks": " Zur Buchliste\n",
+    "HomeComponentSearchHeadline": "Suche",
+    "SearchComponentInput": "Suche",
+    "AuthGuardAlert": "Nicht angemeldet!"
+  }
+}

src/app/admin/book-create/book-create.component.html CHANGED Viewed

@@ -1,3 +1,3 @@
-<h1>Create Book</h1>
 <bm-book-form (submitBook)="create($event)"></bm-book-form>


1	+ <h1 i18n="title create book\|Title for the create book page@@BookCreateComponentTitle">Create Book</h1>
2
3	<bm-book-form (submitBook)="create($event)"></bm-book-form>

src/app/admin/book-edit/book-edit.component.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<h1>Edit Book</h1>
 <bm-book-form
   *ngIf="book$ | async as book"

+<h1 i18n="title edit book|Title for the edit book page@@BookEditComponentTitle">Edit Book</h1>
 <bm-book-form
   *ngIf="book$ | async as book"

src/app/admin/book-form/book-form.component.html CHANGED Viewed

@@ -1,28 +1,25 @@
 <form [formGroup]="form" (ngSubmit)="submitForm()">
-  <label for="title">Title</label>
   <input id="title" formControlName="title">
   <bm-form-errors
     controlName="title"
-    [messages]="{ required: 'Title is required' }">
   </bm-form-errors>
-  <label for="subtitle">Subtitle</label>
   <input id="subtitle" formControlName="subtitle">
-  <label for="isbn">ISBN</label>
   <input id="isbn" formControlName="isbn">
   <bm-form-errors
     controlName="isbn"
-    [messages]="{
-      required: 'ISBN is required',
-      isbnformat: 'ISBN must have 10 or 13 chars',
-      isbnexists: 'ISBN already exists'
-    }">
   </bm-form-errors>
-  <label>Authors</label>
   <button type="button" class="add"
-    (click)="addAuthorControl()">
     + Author
   </button>
   <fieldset formArrayName="authors">
@@ -33,19 +30,19 @@
   </fieldset>
   <bm-form-errors
     controlName="authors"
-    [messages]="{ atleastonevalue: 'At least one author required' }">
   </bm-form-errors>
-  <label for="description">Description</label>
   <textarea id="description" formControlName="description"></textarea>
-  <label for="published">Published</label>
   <input type="date" useValueAsLocalIso id="published" formControlName="published">
-  <label for="thumbnailUrl">Thumbnail URL</label>
   <input type="url" id="thumbnailUrl" formControlName="thumbnailUrl">
-  <button type="submit" [disabled]="form.invalid">
     Save
   </button>
 </form>

 <form [formGroup]="form" (ngSubmit)="submitForm()">
+  <label for="title" i18n="label title|Label for the title input@@BookFormComponentLabelTitle">Title</label>
   <input id="title" formControlName="title">
   <bm-form-errors
     controlName="title"
+    [messages]="errorsTranslated('title')">
   </bm-form-errors>
+  <label for="subtitle" i18n="label subtitle|Label for the subtitle input@@BookFormComponentLabelSubtitle">Subtitle</label>
   <input id="subtitle" formControlName="subtitle">
+  <label for="isbn" i18n="label isbn|Label for the ISBN input@@BookFormComponentLabelIsbn">ISBN</label>
   <input id="isbn" formControlName="isbn">
   <bm-form-errors
     controlName="isbn"
+    [messages]="errorsTranslated('isbn')">
   </bm-form-errors>
+  <label i18n="label authors|Label for the authors inputs@@BookFormComponentLabelAuthors">Authors</label>
   <button type="button" class="add"
+    (click)="addAuthorControl()"
+    i18n="button add author|Text for the button to add an author input@@BookFormComponentAddAuthor">
     + Author
   </button>
   <fieldset formArrayName="authors">
   </fieldset>
   <bm-form-errors
     controlName="authors"
+    [messages]="errorsTranslated('authors')">
   </bm-form-errors>
+  <label for="description" i18n="label description|Label for the description text@@BookFormComponentLabelDescription">Description</label>
   <textarea id="description" formControlName="description"></textarea>
+  <label for="published" i18n="label published|Label for the published input@@BookFormComponentLabelPublished">Published</label>
   <input type="date" useValueAsLocalIso id="published" formControlName="published">
+  <label for="thumbnailUrl" i18n="label thumbnail|Label for the thumbnail input@@BookFormComponentLabelThumbnail">Thumbnail URL</label>
   <input type="url" id="thumbnailUrl" formControlName="thumbnailUrl">
+  <button type="submit" [disabled]="form.invalid" i18n="button save|Text for save button@@BookFormComponentSave">
     Save
   </button>
 </form>

src/app/admin/book-form/book-form.component.ts CHANGED Viewed

@@ -89,4 +89,21 @@ export class BookFormComponent implements OnChanges {
     this.submitBook.emit(newBook);
   }
 }

     this.submitBook.emit(newBook);
   }
+  errorsTranslated(controlName: string) {
+    const errorTexts: { [controlName: string]: { [errorCode: string]: string }} = {
+      title: {
+        required: $localize`:title required error@@BookFormComponentErrorTitleRequired:Title is required`
+      },
+      isbn: {
+        required: $localize`:isbn required error@@BookFormComponentErrorIsbnRequired:ISBN is required`,
+        isbnformat: $localize`:isbn format error@@BookFormComponentErrorIsbnFormat:ISBN must have 10 or 13 characters`,
+        isbnexists: $localize`:isbn exists error@@BookFormComponentErrorIsbnExists:ISBN already exists`,
+      },
+      authors: {
+        atleastonevalue: $localize`:at least one author error@@BookFormComponentErrorAtLeastOneAuthor:At least one author required`
+      }
+    }
+    return errorTexts[controlName] || {};
+  }
 }

src/app/app.component.html CHANGED Viewed

@@ -1,14 +1,18 @@
 <nav>
-  <a routerLink="/home" routerLinkActive="active" ariaCurrentWhenActive="page">Home</a>
-  <a routerLink="/books" routerLinkActive="active" ariaCurrentWhenActive="page">Books</a>
-  <a routerLink="/admin" routerLinkActive="active" ariaCurrentWhenActive="page">Administration</a>
   <div class="actions">
     <button class="green"
       (click)="auth.login()"
-      *ngIf="!auth.isAuthenticated">Login</button>
     <button class="red"
       (click)="auth.logout()"
-      *ngIf="auth.isAuthenticated">Logout</button>
   </div>
 </nav>

 <nav>
+  <a routerLink="/home" routerLinkActive="active" ariaCurrentWhenActive="page" i18n="nav home@@AppComponentHome">Home</a>
+  <a routerLink="/books" routerLinkActive="active" ariaCurrentWhenActive="page" i18n="nav books@@AppComponentBooks">Books</a>
+  <a routerLink="/admin" routerLinkActive="active" ariaCurrentWhenActive="page" i18n="nav admin@@AppComponentAdmin">Administration</a>
   <div class="actions">
     <button class="green"
       (click)="auth.login()"
+      *ngIf="!auth.isAuthenticated"
+      i18n="login@@AppComponentLogin">Login</button>
     <button class="red"
       (click)="auth.logout()"
+      *ngIf="auth.isAuthenticated"
+      i18n="logout@@AppComponentLogout">Logout</button>
+    <button (click)="changeLocale('de')">DE</button>
+    <button (click)="changeLocale('en')">EN</button>
   </div>
 </nav>

src/app/app.component.ts CHANGED Viewed

@@ -10,4 +10,9 @@ import { AuthService } from './shared/auth.service';
 })
 export class AppComponent {
   constructor(public auth: AuthService) {}
 }

 })
 export class AppComponent {
   constructor(public auth: AuthService) {}
+  changeLocale(targetLang: string) {
+    localStorage.setItem('locale', targetLang);
+    location.reload();
+  }
 }

src/app/books/book-details/book-details.component.html CHANGED Viewed

@@ -3,32 +3,34 @@
   <p role="doc-subtitle" *ngIf="book.subtitle">{{ book.subtitle }}</p>
   <div class="header">
     <div>
-      <h2>Authors</h2>
       <ul>
         <li *ngFor="let author of book.authors">{{ author }}</li>
       </ul>
     </div>
     <div>
-      <h2>ISBN</h2>
       {{ book.isbn | isbn }}
     </div>
     <div *ngIf="book.published">
-      <h2>Published</h2>
       {{ book.published | date:'longDate' }}
     </div>
   </div>
-  <h2>Description</h2>
   <p>{{ book.description }}</p>
   <img *ngIf="book.thumbnailUrl"
     [src]="book.thumbnailUrl"
-    alt="Cover">
-  <a class="button arrow-left" routerLink="..">Back to list</a>
   <ng-container *bmLoggedinOnly>
-    <button class="red" bmConfirm="Remove book?" (confirm)="removeBook(book.isbn)">
       Remove book
     </button>
     <a class="button"
-      [routerLink]="['/admin/edit', book.isbn]">
       Edit book
     </a>
   </ng-container>

   <p role="doc-subtitle" *ngIf="book.subtitle">{{ book.subtitle }}</p>
   <div class="header">
     <div>
+      <h2 i18n="headline authors|Headline for the authors@@BookDetailsComponentAuthors">Authors</h2>
       <ul>
         <li *ngFor="let author of book.authors">{{ author }}</li>
       </ul>
     </div>
     <div>
+      <h2 i18n="headline ISBN|Headline for the ISBN@@BookDetailsComponentIsbn">ISBN</h2>
       {{ book.isbn | isbn }}
     </div>
     <div *ngIf="book.published">
+      <h2 i18n="headline published|Headline for the published date@@BookDetailsComponentPublished">Published</h2>
       {{ book.published | date:'longDate' }}
     </div>
   </div>
+  <h2 i18n="headline description|Headline for the description@@BookDetailsComponentDescription">Description</h2>
   <p>{{ book.description }}</p>
   <img *ngIf="book.thumbnailUrl"
     [src]="book.thumbnailUrl"
+    alt="Cover"
+    i18n-alt="cover alt text|Alternative text when no cover is defined@@BookDetailsComponentAltCover">
+  <a class="button arrow-left" routerLink=".." i18n="link back|Link for navigating back to the books list@@BookDetailsComponentBackToList">Back to list</a>
   <ng-container *bmLoggedinOnly>
+    <button class="red" bmConfirm="Remove book?" (confirm)="removeBook(book.isbn)" i18n="button remove|Button text to remove a book@@BookDetailsComponentRemove">
       Remove book
     </button>
     <a class="button"
+      [routerLink]="['/admin/edit', book.isbn]"
+      i18n="button edit|Button text to edit a book@@BookDetailsComponentEdit">
       Edit book
     </a>
   </ng-container>

src/app/books/book-list/book-list.component.html CHANGED Viewed

@@ -1,9 +1,9 @@
-<h1>Books</h1>
 <ul class="book-list" *ngIf="books$ | async as books">
   <li *ngFor="let book of books">
     <bm-book-list-item [book]="book"></bm-book-list-item>
   </li>
-  <li *ngIf="!books.length">
     No books available.
   </li>
 </ul>

+<h1 i18n="title books|Title for the books page@@BookListComponentTitle">Books</h1>
 <ul class="book-list" *ngIf="books$ | async as books">
   <li *ngFor="let book of books">
     <bm-book-list-item [book]="book"></bm-book-list-item>
   </li>
+  <li *ngIf="!books.length" i18n="text no books|Text displayed when no books are available@@BookListComponentNoBooks">
     No books available.
   </li>
 </ul>

src/app/books/book-list-item/book-list-item.component.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <a *ngIf="book" [routerLink]="book.isbn" class="list-item">
-  <img *ngIf="book.thumbnailUrl" [src]="book.thumbnailUrl" alt="Cover">
   <h2>{{ book.title }}</h2>
   <p role="doc-subtitle" *ngIf="book.subtitle">
     {{ book.subtitle }}
@@ -9,5 +9,5 @@
       {{ author }}
     </li>
   </ul>
-  <div>ISBN {{ book.isbn | isbn }}</div>
 </a>

 <a *ngIf="book" [routerLink]="book.isbn" class="list-item">
+  <img *ngIf="book.thumbnailUrl" [src]="book.thumbnailUrl" alt="Cover" i18n-alt="cover alt text|Alternative text when no cover is defined@@BookListItemComponentAltCover">
   <h2>{{ book.title }}</h2>
   <p role="doc-subtitle" *ngIf="book.subtitle">
     {{ book.subtitle }}
       {{ author }}
     </li>
   </ul>
+  <div><ng-container i18n="book text before ISBN|Text for ISBN right before the number@@BookListItemComponentIsbn">ISBN</ng-container> {{ book.isbn | isbn }}</div>
 </a>

src/app/home/home.component.html CHANGED Viewed

@@ -1,8 +1,8 @@
-<h1>Home</h1>
-<a routerLink="/books" class="button red">
   Show book list
 </a>
-<h2>Search</h2>
 <bm-search></bm-search>

+<h1 i18n="title home|Title for the home page@@HomeComponentTitle">Home</h1>
+<a routerLink="/books" class="button red" i18n="link books list|Text of the link to the books screen@@HomeComponentBooks">
   Show book list
 </a>
+<h2 i18n="headline search|Headline text above the search input@@HomeComponentSearchHeadline">Search</h2>
 <bm-search></bm-search>

src/app/search/search.component.html CHANGED Viewed

@@ -1,6 +1,7 @@
 <input type="search"
   autocomplete="off"
   aria-label="Search"
   [class.loading]="isLoading"
   #searchInput
   (input)="input$.next(searchInput.value)">

 <input type="search"
   autocomplete="off"
   aria-label="Search"
+  i18n-aria-label="search input ARIA label|input search@@SearchComponentInput"
   [class.loading]="isLoading"
   #searchInput
   (input)="input$.next(searchInput.value)">

src/main.ts CHANGED Viewed

@@ -1,7 +1,30 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
-platformBrowserDynamic().bootstrapModule(AppModule, {
-  ngZoneEventCoalescing: true,
-})
-  .catch(err => console.error(err));

+/// <reference types="@angular/localize" />
+import { registerLocaleData } from '@angular/common';
+import { LOCALE_ID } from '@angular/core';
+import { loadTranslations } from '@angular/localize';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import localeDe from '@angular/common/locales/de';
 import { AppModule } from './app/app.module';
+async function setupLocale() {
+  if (localStorage.getItem('locale') !== 'de') {
+    return 'en-US';
+  }
+  const response = await fetch('messages.de.json');
+  const result = await response.json();
+  loadTranslations(result.translations);
+  registerLocaleData(localeDe);
+  return 'de';
+}
+setupLocale().then(localeValue => {
+  platformBrowserDynamic([
+    { provide: LOCALE_ID, useValue: localeValue }
+  ])
+    .bootstrapModule(AppModule, {
+      ngZoneEventCoalescing: true
+    })
+    .catch(err => console.error(err));
+});

tsconfig.app.json CHANGED Viewed

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

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

tsconfig.spec.json CHANGED Viewed

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

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

Differenzansicht 16c-i18nim Vergleich zu 16-guards

Differenzansicht 16c-i18n
im Vergleich zu 16-guards