BM5 Diff | 18-modern-angular (von 17-standalone)

angular.json CHANGED Viewed

@@ -5,17 +5,7 @@
   "projects": {
     "book-monkey": {
       "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "standalone": false
-        },
-        "@schematics/angular:directive": {
-          "standalone": false
-        },
-        "@schematics/angular:pipe": {
-          "standalone": false
-        }
-      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "bm",
@@ -39,7 +29,15 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
           },
           "configurations": {
             "production": {

   "projects": {
     "book-monkey": {
       "projectType": "application",
+      "schematics": {},
       "root": "",
       "sourceRoot": "src",
       "prefix": "bm",
             "styles": [
               "src/styles.css"
             ],
+            "scripts": [],
+            "server": "src/main.server.ts",
+            "prerender": {
+              "discoverRoutes": true,
+              "routesFile": "routes.txt"
+            },
+            "ssr": {
+              "entry": "src/server.ts"
+            }
           },
           "configurations": {
             "production": {

package.json CHANGED Viewed

@@ -7,7 +7,8 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
@@ -19,9 +20,12 @@
     "@angular/forms": "^19.1.0",
     "@angular/platform-browser": "^19.1.0",
     "@angular/platform-browser-dynamic": "^19.1.0",
     "@angular/router": "^19.1.0",
     "angular-date-value-accessor": "^3.0.0",
     "book-monkey5-styles": "^1.0.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -30,7 +34,9 @@
     "@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",
     "jasmine-core": "~5.5.0",
@@ -42,4 +48,4 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "8.18.0"
   }
-}

     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
+    "lint": "ng lint",
+    "serve:ssr:book-monkey": "node dist/book-monkey/server/server.mjs"
   },
   "private": true,
   "dependencies": {
     "@angular/forms": "^19.1.0",
     "@angular/platform-browser": "^19.1.0",
     "@angular/platform-browser-dynamic": "^19.1.0",
+    "@angular/platform-server": "^19.1.0",
     "@angular/router": "^19.1.0",
+    "@angular/ssr": "^19.1.1",
     "angular-date-value-accessor": "^3.0.0",
     "book-monkey5-styles": "^1.0.4",
+    "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
     "@angular-devkit/build-angular": "^19.1.1",
     "@angular/cli": "^19.1.1",
     "@angular/compiler-cli": "^19.1.0",
+    "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
+    "@types/node": "^18.18.0",
     "angular-eslint": "19.0.2",
     "eslint": "^9.16.0",
     "jasmine-core": "~5.5.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "8.18.0"
   }
+}

routes.txt ADDED Viewed

	@@ -0,0 +1,10 @@

+/books/9783864909467
+/books/9783864903571
+/books/9783864906466
+/books/9783864907791
+/books/9783864904523
+/books/9783960091417
+/books/9783864907845
+/books/9783864905520
+/books/9783864902079
+/books/9783864909009

src/app/admin/admin.module.ts DELETED Viewed

@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { LocalIsoDateValueAccessor } from 'angular-date-value-accessor';
-import { AdminRoutingModule } from './admin-routing.module';
-import { BookFormComponent } from './book-form/book-form.component';
-import { BookCreateComponent } from './book-create/book-create.component';
-import { BookEditComponent } from './book-edit/book-edit.component';
-import { FormErrorsComponent } from './form-errors/form-errors.component';
-@NgModule({
-  declarations: [
-    BookFormComponent,
-    BookCreateComponent,
-    BookEditComponent,
-    FormErrorsComponent
-  ],
-  imports: [
-    CommonModule,
-    AdminRoutingModule,
-    ReactiveFormsModule,
-    LocalIsoDateValueAccessor
-  ],
-})
-export class AdminModule { }

src/app/admin/{admin-routing.module.ts → admin.routes.ts} RENAMED Viewed

@@ -1,9 +1,8 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
 import { BookCreateComponent } from './book-create/book-create.component';
 import { BookEditComponent } from './book-edit/book-edit.component';
-const routes: Routes = [
   {
     path: '',
     redirectTo: 'create',
@@ -18,9 +17,3 @@ const routes: Routes = [
     component: BookEditComponent,
   }
 ];
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class AdminRoutingModule { }

+import { Routes } from '@angular/router';
 import { BookCreateComponent } from './book-create/book-create.component';
 import { BookEditComponent } from './book-edit/book-edit.component';
+export const ADMIN_ROUTES: Routes = [
   {
     path: '',
     redirectTo: 'create',
     component: BookEditComponent,
   }
 ];

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

@@ -1,21 +1,19 @@
-import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { BookStoreService } from '../../shared/book-store.service';
 import { Book } from '../../shared/book';
 @Component({
   selector: 'bm-book-create',
   templateUrl: './book-create.component.html',
-  standalone: false,
-  styleUrl: './book-create.component.css'
 })
 export class BookCreateComponent {
-  constructor(
-    private service: BookStoreService,
-    private router: Router
-  ) { }
   create(book: Book) {
     this.service.create(book).subscribe(createdBook => {

+import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { BookStoreService } from '../../shared/book-store.service';
 import { Book } from '../../shared/book';
+import { BookFormComponent } from '../book-form/book-form.component';
 @Component({
   selector: 'bm-book-create',
   templateUrl: './book-create.component.html',
+  styleUrl: './book-create.component.css',
+  imports: [BookFormComponent],
 })
 export class BookCreateComponent {
+  private service = inject(BookStoreService);
+  private router = inject(Router);
   create(book: Book) {
     this.service.create(book).subscribe(createdBook => {

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

@@ -1,6 +1,7 @@
 <h1>Edit Book</h1>
 <bm-book-form
-  *ngIf="book$ | async as book"
   [book]="book"
   (submitBook)="update($event)"></bm-book-form>

 <h1>Edit Book</h1>
+@if (book$ | async; as book) {
 <bm-book-form
   [book]="book"
   (submitBook)="update($event)"></bm-book-form>
+}

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

@@ -1,29 +1,26 @@
-import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { map, Observable, switchMap } from 'rxjs';
 import { Book } from '../../shared/book';
 import { BookStoreService } from '../../shared/book-store.service';
 @Component({
   selector: 'bm-book-edit',
   templateUrl: './book-edit.component.html',
-  standalone: false,
-  styleUrl: './book-edit.component.css'
 })
 export class BookEditComponent {
-  book$: Observable<Book>;
-  constructor(
-    private service: BookStoreService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
-    this.book$ = this.route.paramMap.pipe(
-      map(params => params.get('isbn')!),
-      switchMap(isbn => this.service.getSingle(isbn))
-    );
-  }
   update(book: Book) {
     this.service.update(book).subscribe(updatedBook => {

+import { AsyncPipe } from '@angular/common';
+import { Component, inject, input } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { Router } from '@angular/router';
+import { switchMap } from 'rxjs';
 import { Book } from '../../shared/book';
 import { BookStoreService } from '../../shared/book-store.service';
+import { BookFormComponent } from '../book-form/book-form.component';
 @Component({
   selector: 'bm-book-edit',
   templateUrl: './book-edit.component.html',
+  styleUrl: './book-edit.component.css',
+  imports: [AsyncPipe, BookFormComponent],
 })
 export class BookEditComponent {
+  private service = inject(BookStoreService);
+  private router = inject(Router);
+  isbn = input.required<string>();
+  book$ = toObservable(this.isbn).pipe(
+    switchMap(isbn => this.service.getSingle(isbn))
+  );
   update(book: Book) {
     this.service.update(book).subscribe(updatedBook => {

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

@@ -26,10 +26,11 @@
     + Author
   </button>
   <fieldset formArrayName="authors">
     <input
-      *ngFor="let a of authors.controls; index as i"
-      [attr.aria-label]="'Author ' + i"
-      [formControlName]="i">
   </fieldset>
   <bm-form-errors
     controlName="authors"

     + Author
   </button>
   <fieldset formArrayName="authors">
+    @for (a of authors.controls; track a) {
     <input
+      [attr.aria-label]="'Author ' + $index"
+      [formControlName]="$index">
+    }
   </fieldset>
   <bm-form-errors
     controlName="authors"

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

@@ -1,19 +1,19 @@
-import { Component, Output, EventEmitter, Input, OnChanges, inject } from '@angular/core';
-import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Book } from '../../shared/book';
-import { AsyncValidatorsService } from '../shared/async-validators.service';
-import { atLeastOneValue, isbnFormat } from '../shared/validators';
 @Component({
   selector: 'bm-book-form',
   templateUrl: './book-form.component.html',
-  standalone: false,
-  styleUrl: './book-form.component.css'
 })
-export class BookFormComponent implements OnChanges {
-  @Input() book?: Book;
-  @Output() submitBook = new EventEmitter<Book>();
   form = new FormGroup({
     title: new FormControl('', {
@@ -23,11 +23,8 @@ export class BookFormComponent implements OnChanges {
     subtitle: new FormControl('', { nonNullable: true }),
     isbn: new FormControl('', {
       nonNullable: true,
-      validators: [
-        Validators.required,
-        isbnFormat
-      ],
-      asyncValidators: inject(AsyncValidatorsService).isbnExists()
     }),
     description: new FormControl('', { nonNullable: true }),
     published: new FormControl('', { nonNullable: true }),
@@ -35,13 +32,16 @@ export class BookFormComponent implements OnChanges {
     thumbnailUrl: new FormControl('', { nonNullable: true })
   });
-  ngOnChanges(): void {
-    if (this.book) {
-      this.setFormValues(this.book);
-      this.setEditMode(true);
-    } else {
-      this.setEditMode(false);
-    }
   }
   private setFormValues(book: Book) {

+import { Component, effect, input, output } from '@angular/core';
+import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Book } from '../../shared/book';
+import { FormErrorsComponent } from '../form-errors/form-errors.component';
+import { atLeastOneValue, isbnExists, isbnFormat } from '../shared/validators';
 @Component({
   selector: 'bm-book-form',
   templateUrl: './book-form.component.html',
+  styleUrl: './book-form.component.css',
+  imports: [ReactiveFormsModule, FormErrorsComponent],
 })
+export class BookFormComponent {
+  book = input<Book>();
+  submitBook = output<Book>();
   form = new FormGroup({
     title: new FormControl('', {
     subtitle: new FormControl('', { nonNullable: true }),
     isbn: new FormControl('', {
       nonNullable: true,
+      validators: [Validators.required, isbnFormat],
+      asyncValidators: isbnExists(),
     }),
     description: new FormControl('', { nonNullable: true }),
     published: new FormControl('', { nonNullable: true }),
     thumbnailUrl: new FormControl('', { nonNullable: true })
   });
+  constructor() {
+    effect(() => {
+      const book = this.book();
+      if (book) {
+        this.setFormValues(book);
+        this.setEditMode(true);
+      } else {
+        this.setEditMode(false);
+      }
+    });
   }
   private setFormValues(book: Book) {

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

@@ -1,3 +1,3 @@
-<p class="error" *ngFor="let error of errors">
-  {{ error }}
-</p>

+@for (error of errors; track $index) {
+<p class="error">{{ error }}</p>
+}

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

@@ -1,31 +1,26 @@
-import { Component, Input } from '@angular/core';
 import { FormGroupDirective } from '@angular/forms';
 @Component({
   selector: 'bm-form-errors',
   templateUrl: './form-errors.component.html',
-  standalone: false,
   styleUrl: './form-errors.component.css',
 })
 export class FormErrorsComponent {
-  @Input() controlName?: string;
-  @Input() messages: { [errorCode: string]: string } = {};
-  constructor(private form: FormGroupDirective) {}
   get errors(): string[] {
-    if (!this.controlName) {
-      return [];
-    }
-    const control = this.form.control.get(this.controlName);
     if (!control || !control.errors || !control.touched) {
       return [];
     }
     return Object.keys(control.errors).map(errorCode => {
-      return this.messages[errorCode];
     });
   }
 }

+import { Component, inject, input } from '@angular/core';
 import { FormGroupDirective } from '@angular/forms';
 @Component({
   selector: 'bm-form-errors',
   templateUrl: './form-errors.component.html',
   styleUrl: './form-errors.component.css',
 })
 export class FormErrorsComponent {
+  controlName = input.required<string>();
+  messages = input.required<{ [errorCode: string]: string }>();
+  private form = inject(FormGroupDirective)
   get errors(): string[] {
+    const control = this.form.control.get(this.controlName());
     if (!control || !control.errors || !control.touched) {
       return [];
     }
     return Object.keys(control.errors).map(errorCode => {
+      return this.messages()[errorCode];
     });
   }
 }

src/app/admin/shared/async-validators.service.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
 import { AsyncValidatorFn } from '@angular/forms';
 import { map } from 'rxjs';
@@ -8,8 +8,7 @@ import { BookStoreService } from '../../shared/book-store.service';
   providedIn: 'root'
 })
 export class AsyncValidatorsService {
-  constructor(private service: BookStoreService) { }
   isbnExists(): AsyncValidatorFn {
     return (control) => {

+import { Injectable, inject } from '@angular/core';
 import { AsyncValidatorFn } from '@angular/forms';
 import { map } from 'rxjs';
   providedIn: 'root'
 })
 export class AsyncValidatorsService {
+  private service = inject(BookStoreService);
   isbnExists(): AsyncValidatorFn {
     return (control) => {

src/app/admin/shared/validators.ts CHANGED Viewed

@@ -1,6 +1,10 @@
-import { isFormArray, ValidatorFn } from '@angular/forms';
-export const isbnFormat: ValidatorFn = function(control) {
   if (!control.value || typeof control.value !== 'string') {
     return null;
   }
@@ -13,9 +17,9 @@ export const isbnFormat: ValidatorFn = function(control) {
   } else {
     return { isbnformat: true };
   }
-}
-export const atLeastOneValue: ValidatorFn = function(control) {
   if (!isFormArray(control)) {
     return null;
   }
@@ -25,4 +29,13 @@ export const atLeastOneValue: ValidatorFn = function(control) {
   } else {
     return { atleastonevalue: true };
   }
-}

+import { inject } from '@angular/core';
+import { AbstractControl, AsyncValidatorFn, isFormArray, ValidatorFn } from '@angular/forms';
+import { map } from 'rxjs';
+import { BookStoreService } from '../../shared/book-store.service';
+export const isbnFormat: ValidatorFn = function (control) {
   if (!control.value || typeof control.value !== 'string') {
     return null;
   }
   } else {
     return { isbnformat: true };
   }
+};
+export const atLeastOneValue: ValidatorFn = function (control) {
   if (!isFormArray(control)) {
     return null;
   }
   } else {
     return { atleastonevalue: true };
   }
+};
+export function isbnExists(): AsyncValidatorFn {
+  const service = inject(BookStoreService);
+  return (control: AbstractControl) => {
+    return service
+      .check(control.value)
+      .pipe(map((exists) => (exists ? { isbnexists: true } : null)));
+  };
+};

src/app/app.component.html CHANGED Viewed

@@ -3,12 +3,11 @@
   <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>

   <a routerLink="/books" routerLinkActive="active" ariaCurrentWhenActive="page">Books</a>
   <a routerLink="/admin" routerLinkActive="active" ariaCurrentWhenActive="page">Administration</a>
   <div class="actions">
+    @if (auth.isAuthenticated()) {
+      <button class="red" (click)="auth.logout()">Logout</button>
+    } @else {
+      <button class="green" (click)="auth.login()">Login</button>
+    }
   </div>
 </nav>

src/app/app.component.ts CHANGED Viewed

@@ -1,13 +1,18 @@
-import { Component } from '@angular/core';
 import { AuthService } from './shared/auth.service';
 @Component({
   selector: 'bm-root',
   templateUrl: './app.component.html',
-  standalone: false,
   styleUrl: './app.component.css'
 })
 export class AppComponent {
-  constructor(public auth: AuthService) {}
 }

+import { Component, inject } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { AuthService } from './shared/auth.service';
 @Component({
   selector: 'bm-root',
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    RouterLinkActive
+  ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
+  auth = inject(AuthService)
 }

src/app/app.config.server.ts ADDED Viewed

	@@ -0,0 +1,11 @@

+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering()
+  ]
+};
+export const config = mergeApplicationConfig(appConfig, serverConfig);

src/app/app.config.ts ADDED Viewed

	@@ -0,0 +1,19 @@

+import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideClientHydration } from '@angular/platform-browser';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { routes } from './app.routes';
+import { authInterceptor } from './shared/auth.interceptor';
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes, withComponentInputBinding()),
+    provideHttpClient(
+      withFetch(),
+      withInterceptors([authInterceptor])
+    ),
+    provideClientHydration()
+  ]
+};

src/app/app.module.ts DELETED Viewed

@@ -1,31 +0,0 @@
-import { NgModule } from '@angular/core';
-import { provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { HomeComponent } from './home/home.component';
-import { SearchComponent } from './search/search.component';
-import { AuthInterceptor } from './shared/auth.interceptor';
-@NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    SearchComponent,
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-  ],
-  providers: [
-    provideHttpClient(withInterceptorsFromDi()),
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: AuthInterceptor,
-      multi: true
-    }
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

src/app/{app-routing.module.ts → app.routes.ts} RENAMED Viewed

@@ -1,10 +1,9 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { authGuard } from './shared/auth.guard';
-const routes: Routes = [
   {
     path: '',
     redirectTo: 'home',
@@ -20,13 +19,7 @@ const routes: Routes = [
   },
   {
     path: 'admin',
-    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
     canActivate: [authGuard]
   }
 ];
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

+import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { authGuard } from './shared/auth.guard';
+export const routes: Routes = [
   {
     path: '',
     redirectTo: 'home',
   },
   {
     path: 'admin',
+    loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES),
     canActivate: [authGuard]
   }
 ];

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

@@ -1,27 +1,34 @@
-<div class="details" *ngIf="book$ | async as book">
   <h1>{{ book.title }}</h1>
-  <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)">
@@ -33,3 +40,4 @@
     </a>
   </ng-container>
 </div>

+@if (book$ | async; as book) {
+<div class="details">
   <h1>{{ book.title }}</h1>
+  @if (book.subtitle) {
+  <p role="doc-subtitle">{{ book.subtitle }}</p>
+  }
   <div class="header">
     <div>
       <h2>Authors</h2>
       <ul>
+        @for (author of book.authors; track author) {
+        <li>{{ author }}</li>
+        }
       </ul>
     </div>
     <div>
       <h2>ISBN</h2>
       {{ book.isbn | isbn }}
     </div>
+    @if (book.published) {
+    <div>
       <h2>Published</h2>
       {{ book.published | date:'longDate' }}
     </div>
+    }
   </div>
   <h2>Description</h2>
   <p>{{ book.description }}</p>
+  @if (book.thumbnailUrl) {
+  <img alt="Cover" [ngSrc]="book.thumbnailUrl" width="200" height="250" priority>
+  }
   <a class="button arrow-left" routerLink="..">Back to list</a>
   <ng-container *bmLoggedinOnly>
     <button class="red" bmConfirm="Remove book?" (confirm)="removeBook(book.isbn)">
     </a>
   </ng-container>
 </div>
+}

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

@@ -1,34 +1,35 @@
-import { Component } from '@angular/core';
-import { AsyncPipe, DatePipe, NgFor, NgIf } from '@angular/common';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
-import { Observable } from 'rxjs';
 import { BookStoreService } from '../../shared/book-store.service';
-import { Book } from '../../shared/book';
 import { IsbnPipe } from '../../shared/isbn.pipe';
 import { LoggedinOnlyDirective } from '../../shared/loggedin-only.directive';
-import { ConfirmDirective } from '../../shared/confirm.directive';
 @Component({
   selector: 'bm-book-details',
   templateUrl: './book-details.component.html',
   styleUrl: './book-details.component.css',
   imports: [
-    NgIf, NgFor, DatePipe, AsyncPipe, RouterLink,
-    IsbnPipe, LoggedinOnlyDirective, ConfirmDirective
   ]
 })
 export class BookDetailsComponent {
-  book$: Observable<Book>;
-  constructor(
-    private service: BookStoreService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
-    const isbn = this.route.snapshot.paramMap.get('isbn')!;
-    this.book$ = this.service.getSingle(isbn);
-  }
   removeBook(isbn: string) {
     this.service.remove(isbn).subscribe(() => {

+import { AsyncPipe, DatePipe, NgOptimizedImage } from '@angular/common';
+import { Component, inject, input } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { Router, RouterLink } from '@angular/router';
+import { switchMap } from 'rxjs';
 import { BookStoreService } from '../../shared/book-store.service';
+import { ConfirmDirective } from '../../shared/confirm.directive';
 import { IsbnPipe } from '../../shared/isbn.pipe';
 import { LoggedinOnlyDirective } from '../../shared/loggedin-only.directive';
 @Component({
   selector: 'bm-book-details',
   templateUrl: './book-details.component.html',
   styleUrl: './book-details.component.css',
   imports: [
+    DatePipe,
+    AsyncPipe,
+    NgOptimizedImage,
+    RouterLink,
+    IsbnPipe,
+    LoggedinOnlyDirective,
+    ConfirmDirective
   ]
 })
 export class BookDetailsComponent {
+  private service = inject(BookStoreService);
+  private router = inject(Router);
+  isbn = input.required<string>();
+  book$ = toObservable(this.isbn).pipe(
+    switchMap(isbn => this.service.getSingle(isbn))
+  );
   removeBook(isbn: string) {
     this.service.remove(isbn).subscribe(() => {

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

@@ -1,9 +1,12 @@
 <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>Books</h1>
+@if (books(); as books) {
+  <ul class="book-list">
+  @for (book of books; track book.isbn) {
+  <li>
     <bm-book-list-item [book]="book"></bm-book-list-item>
   </li>
+  } @empty {
+  <li>No books available.</li>
+  }
 </ul>
+}

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

@@ -1,8 +1,6 @@
-import { AsyncPipe, NgFor, NgIf } from '@angular/common';
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Book } from '../../shared/book';
 import { BookStoreService } from '../../shared/book-store.service';
 import { BookListItemComponent } from '../book-list-item/book-list-item.component';
@@ -10,15 +8,9 @@ import { BookListItemComponent } from '../book-list-item/book-list-item.componen
   selector: 'bm-book-list',
   templateUrl: './book-list.component.html',
   styleUrl: './book-list.component.css',
-  imports: [
-    NgIf, NgFor, AsyncPipe,
-    BookListItemComponent
-  ]
 })
 export class BookListComponent {
-  books$: Observable<Book[]>;
-  constructor(private service: BookStoreService) {
-    this.books$ = this.service.getAll();
-  }
 }

+import { Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { BookStoreService } from '../../shared/book-store.service';
 import { BookListItemComponent } from '../book-list-item/book-list-item.component';
   selector: 'bm-book-list',
   templateUrl: './book-list.component.html',
   styleUrl: './book-list.component.css',
+  imports: [BookListItemComponent]
 })
 export class BookListComponent {
+  books = toSignal(inject(BookStoreService).getAll());
 }

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

@@ -1,13 +1,21 @@
-<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 }}
   </p>
   <ul class="comma-list">
-    <li *ngFor="let author of book.authors">
       {{ author }}
     </li>
   </ul>
   <div>ISBN {{ book.isbn | isbn }}</div>
 </a>

+@if(book(); as book) {
+<a [routerLink]="book.isbn" class="list-item">
+  @if(book.thumbnailUrl) {
+  <img alt="Cover" [ngSrc]="book.thumbnailUrl" width="120" height="175">
+  }
   <h2>{{ book.title }}</h2>
+  @if(book.subtitle) {
+  <p role="doc-subtitle">
     {{ book.subtitle }}
   </p>
+  }
   <ul class="comma-list">
+    @for (author of book.authors; track author) {
+    <li>
       {{ author }}
     </li>
+    }
   </ul>
   <div>ISBN {{ book.isbn | isbn }}</div>
 </a>
+}

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

@@ -1,6 +1,6 @@
-import { NgFor, NgIf } from '@angular/common';
-import { Component, Input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { IsbnPipe } from '../../shared/isbn.pipe';
 import { Book } from '../../shared/book';
@@ -9,8 +9,8 @@ import { Book } from '../../shared/book';
   selector: 'bm-book-list-item',
   templateUrl: './book-list-item.component.html',
   styleUrl: './book-list-item.component.css',
-  imports: [NgIf, NgFor, RouterLink, IsbnPipe]
 })
 export class BookListItemComponent {
-  @Input() book?: Book;
 }

+import { Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
+import { NgOptimizedImage } from '@angular/common';
 import { IsbnPipe } from '../../shared/isbn.pipe';
 import { Book } from '../../shared/book';
   selector: 'bm-book-list-item',
   templateUrl: './book-list-item.component.html',
   styleUrl: './book-list-item.component.css',
+  imports: [RouterLink, IsbnPipe, NgOptimizedImage]
 })
 export class BookListItemComponent {
+  book = input.required<Book>();
 }

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

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 @Component({
   selector: 'bm-home',
   templateUrl: './home.component.html',
-  standalone: false,
-  styleUrl: './home.component.css'
 })
 export class HomeComponent {}

 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { SearchComponent } from '../search/search.component';
 @Component({
   selector: 'bm-home',
   templateUrl: './home.component.html',
+  styleUrl: './home.component.css',
+  imports: [RouterLink, SearchComponent],
 })
 export class HomeComponent {}

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

@@ -1,16 +1,21 @@
 <input type="search"
   autocomplete="off"
   aria-label="Search"
-  [class.loading]="isLoading"
   #searchInput
   (input)="input$.next(searchInput.value)">
-<ul class="search-results" *ngIf="results$ | async as results">
-  <li *ngFor="let book of results">
     <a [routerLink]="['/books', book.isbn]">
       {{ book.title }}
       <p role="doc-subtitle">{{ book.subtitle }}</p>
     </a>
   </li>
-  <li *ngIf="!results.length">No results</li>
 </ul>

 <input type="search"
   autocomplete="off"
   aria-label="Search"
+  [class.loading]="isLoading()"
   #searchInput
   (input)="input$.next(searchInput.value)">
+@if (results$ | async; as results) {
+<ul class="search-results">
+  @for (book of results; track book.isbn) {
+  <li>
     <a [routerLink]="['/books', book.isbn]">
       {{ book.title }}
       <p role="doc-subtitle">{{ book.subtitle }}</p>
     </a>
   </li>
+  } @empty {
+  <li>No results</li>
+  }
 </ul>
+}

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

@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
-import { Subject, debounceTime, distinctUntilChanged, filter, switchMap, tap, Observable } from 'rxjs';
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';
@@ -7,23 +9,23 @@ import { BookStoreService } from '../shared/book-store.service';
 @Component({
   selector: 'bm-search',
   templateUrl: './search.component.html',
-  standalone: false,
-  styleUrl: './search.component.css'
 })
 export class SearchComponent {
   input$ = new Subject<string>();
-  isLoading = false;
   results$: Observable<Book[]>;
-  constructor(private service: BookStoreService) {
     this.results$ = this.input$.pipe(
       filter(term => term.length >= 3),
       debounceTime(500),
       distinctUntilChanged(),
-      tap(() => this.isLoading = true),
       switchMap(term => this.service.getAllSearch(term)),
-      tap(() => this.isLoading = false)
     );
   }
 }

+import { AsyncPipe } from '@angular/common';
+import { Component, inject, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { debounceTime, distinctUntilChanged, filter, Observable, Subject, switchMap, tap } from 'rxjs';
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';
 @Component({
   selector: 'bm-search',
   templateUrl: './search.component.html',
+  styleUrl: './search.component.css',
+  imports: [RouterLink, AsyncPipe],
 })
 export class SearchComponent {
+  private service = inject(BookStoreService)
   input$ = new Subject<string>();
+  isLoading = signal(false);
   results$: Observable<Book[]>;
+  constructor() {
     this.results$ = this.input$.pipe(
       filter(term => term.length >= 3),
       debounceTime(500),
       distinctUntilChanged(),
+      tap(() => this.isLoading.set(true)),
       switchMap(term => this.service.getAllSearch(term)),
+      tap(() => this.isLoading.set(false))
     );
   }
 }

src/app/shared/auth.guard.ts CHANGED Viewed

@@ -8,7 +8,7 @@ export const authGuard: CanActivateFn = () => {
   const authService = inject(AuthService);
   const router = inject(Router);
-  if (authService.isAuthenticated) {
     return true;
   } else {
     window.alert('Not logged in!');

   const authService = inject(AuthService);
   const router = inject(Router);
+  if (authService.isAuthenticated()) {
     return true;
   } else {
     window.alert('Not logged in!');

src/app/shared/auth.interceptor.ts CHANGED Viewed

@@ -1,36 +1,23 @@
-import { Injectable } from '@angular/core';
-import {
-  HttpRequest,
-  HttpHandler,
-  HttpEvent,
-  HttpInterceptor
-} from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { AuthService } from './auth.service';
-@Injectable()
-export class AuthInterceptor implements HttpInterceptor {
-  constructor(private authService: AuthService) {}
-  intercept(
-    request: HttpRequest<unknown>,
-    next: HttpHandler
-  ): Observable<HttpEvent<unknown>> {
-    const token = '1234567890';
-    if (this.authService.isAuthenticated) {
-      // Token in Header einfügen
-      const reqWithToken = request.clone({
-        setHeaders: {
-          Authorization: `Bearer ${token}`
-        }
-      });
-      return next.handle(reqWithToken);
-    } else {
-      // Request unverändert weitergeben
-      return next.handle(request);
-    }
   }
 }

+import { inject } from '@angular/core';
+import { HttpInterceptorFn } from '@angular/common/http';
+import { AuthService } from './auth.service';
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+  const authService = inject(AuthService);
+  const token = '1234567890';
+  if (authService.isAuthenticated()) {
+    // Token in Header einfügen
+    const reqWithToken = req.clone({
+      setHeaders: {
+        Authorization: `Bearer ${token}`
+      }
+    });
+    return next(reqWithToken);
+  } else {
+    // Request unverändert weitergeben
+    return next(req);
   }
 }

src/app/shared/auth.service.ts CHANGED Viewed

@@ -1,22 +1,18 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
 @Injectable({
   providedIn: 'root'
 })
 export class AuthService {
-  private _isAuthenticated$ = new BehaviorSubject(true);
-  readonly isAuthenticated$ = this._isAuthenticated$.asObservable();
-  get isAuthenticated() {
-    return this._isAuthenticated$.value;
-  }
   login() {
-    this._isAuthenticated$.next(true);
   }
   logout() {
-    this._isAuthenticated$.next(false);
   }
 }

+import { Injectable, signal } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
 @Injectable({
   providedIn: 'root'
 })
 export class AuthService {
+  readonly isAuthenticated = signal(true);
+  readonly isAuthenticated$ = toObservable(this.isAuthenticated);
   login() {
+    this.isAuthenticated.set(true);
   }
   logout() {
+    this.isAuthenticated.set(false);
   }
 }

src/app/shared/book-store.service.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
 import { Observable, catchError, of } from 'rxjs';
 import { Book } from './book';
@@ -9,8 +9,7 @@ import { Book } from './book';
 })
 export class BookStoreService {
   private apiUrl = 'https://api5.angular-buch.com';
-  constructor(private http: HttpClient) {}
   getAll(): Observable<Book[]> {
     return this.http.get<Book[]>(`${this.apiUrl}/books`).pipe(

 import { HttpClient } from '@angular/common/http';
+import { Injectable, inject } from '@angular/core';
 import { Observable, catchError, of } from 'rxjs';
 import { Book } from './book';
 })
 export class BookStoreService {
   private apiUrl = 'https://api5.angular-buch.com';
+  private http = inject(HttpClient);
   getAll(): Observable<Book[]> {
     return this.http.get<Book[]>(`${this.apiUrl}/books`).pipe(

src/app/shared/confirm.directive.ts CHANGED Viewed

@@ -1,14 +1,14 @@
-import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
 @Directive({
   selector: '[bmConfirm]'
 })
 export class ConfirmDirective {
-  @Input('bmConfirm') confirmText?: string;
-  @Output() confirm = new EventEmitter<void>();
   @HostListener('click') onClick() {
-    if (window.confirm(this.confirmText)) {
       this.confirm.emit();
     }
   }

+import { Directive, HostListener, input, output } from '@angular/core';
 @Directive({
   selector: '[bmConfirm]'
 })
 export class ConfirmDirective {
+  confirmText = input.required<string>({ alias: 'bmConfirm' });
+  confirm = output();
   @HostListener('click') onClick() {
+    if (window.confirm(this.confirmText())) {
       this.confirm.emit();
     }
   }

src/app/shared/loggedin-only.directive.ts CHANGED Viewed

@@ -1,31 +1,22 @@
-import { Directive, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
 import { AuthService } from './auth.service';
 @Directive({
   selector: '[bmLoggedinOnly]'
 })
-export class LoggedinOnlyDirective implements OnDestroy {
-  private destroy$ = new Subject<void>();
-  constructor(
-    private template: TemplateRef<unknown>,
-    private viewContainer: ViewContainerRef,
-    private authService: AuthService
-  ) {
-    this.authService.isAuthenticated$.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe(isAuthenticated => {
-      if (isAuthenticated) {
         this.viewContainer.createEmbeddedView(this.template);
       } else {
         this.viewContainer.clear();
       }
     });
   }
-  ngOnDestroy(): void {
-    this.destroy$.next();
-  }
 }

+import { Directive, TemplateRef, ViewContainerRef, effect, inject } from '@angular/core';
 import { AuthService } from './auth.service';
 @Directive({
   selector: '[bmLoggedinOnly]'
 })
+export class LoggedinOnlyDirective {
+  private template = inject(TemplateRef);
+  private viewContainer = inject(ViewContainerRef);
+  private authService = inject(AuthService);
+  constructor() {
+    effect(() => {
+      if (this.authService.isAuthenticated()) {
         this.viewContainer.createEmbeddedView(this.template);
       } else {
         this.viewContainer.clear();
       }
     });
   }
 }

src/index.html CHANGED Viewed

@@ -6,6 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
   <bm-root>

   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://cdn.ng-buch.de">
 </head>
 <body>
   <bm-root>

src/main.server.ts ADDED Viewed

	@@ -0,0 +1,7 @@

+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+const bootstrap = () => bootstrapApplication(AppComponent, config);
+export default bootstrap;

src/main.ts CHANGED Viewed

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

+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

src/server.ts ADDED Viewed

	@@ -0,0 +1,65 @@

+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine, isMainModule } from '@angular/ssr/node';
+import express from 'express';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import AppServerModule from './main.server';
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
+const indexHtml = join(serverDistFolder, 'index.server.html');
+const app = express();
+const commonEngine = new CommonEngine();
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/**', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
+/**
+ * Serve static files from /browser
+ */
+app.get(
+  '**',
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: 'index.html'
+  }),
+);
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.get('**', (req, res, next) => {
+  const { protocol, originalUrl, baseUrl, headers } = req;
+  commonEngine
+    .render({
+      bootstrap: AppServerModule,
+      documentFilePath: indexHtml,
+      url: `${protocol}://${headers.host}${originalUrl}`,
+      publicPath: browserDistFolder,
+      providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+    })
+    .then((html) => res.send(html))
+    .catch((err) => next(err));
+});
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url)) {
+  const port = process.env['PORT'] || 4000;
+  app.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}

tsconfig.app.json CHANGED Viewed

@@ -4,10 +4,14 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
   },
   "files": [
-    "src/main.ts"
   ],
   "include": [
     "src/**/*.d.ts"

   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
+    "types": [
+      "node"
+    ]
   },
   "files": [
+    "src/main.ts",
+    "src/main.server.ts",
+    "src/server.ts"
   ],
   "include": [
     "src/**/*.d.ts"

Differenzansicht 18-modern-angularim Vergleich zu 17-standalone

Differenzansicht 18-modern-angular
im Vergleich zu 17-standalone