fix(challenge16): modify code to work with cypress without any hack on first routing

apps/router-testing/src/app/app.component.ts

@@ -1,10 +1,42 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, RouterLink],
   selector: 'app-root',
-  template: ` <router-outlet /> `,
+  styles: [
+    `
+      h1 {
+        margin-bottom: 0;
+      }
+      nav a {
+        padding: 1rem;
+        text-decoration: none;
+        margin-top: 10px;
+        display: inline-block;
+        background-color: #e8e8e8;
+        color: #3d3d3d;
+        border-radius: 4px;
+        margin-bottom: 10px;
+      }
+      nav a:hover {
+        color: white;
+        background-color: #42545c;
+      }
+      nav a.active {
+        background-color: black;
+      }
+    `,
+  ],
+  template: `
+    <h1>Library</h1>
+
+    <nav>
+      <a routerLink="/search" routerLinkActive="active">Borrow a Book</a>
+    </nav>
+
+    <router-outlet />
+  `,
 })
 export class AppComponent {}

apps/router-testing/src/app/app.routes.ts

@@ -3,7 +3,7 @@ import { bookGuard } from './book.guard';
 
 export const appRoutes: Route[] = [
   {
-    path: '',
+    path: 'search',
     loadComponent: () => import('./search.component'),
   },
   {

apps/router-testing/src/app/no-book-search.component.ts

@@ -1,13 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
 
 @Component({
   standalone: true,
-  imports: [RouterLink],
-  template: `
-    <div>No book found for this search</div>
-    <button routerLink="/">Go Back</button>
-  `,
+  template: ` <div>No book found for this search</div> `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class ShelfComponent {}

apps/router-testing/src/app/search.component.ts

@@ -7,28 +7,55 @@ import { availableBooks } from './book.model';
 @Component({
   standalone: true,
   imports: [ReactiveFormsModule, RouterLink, NgFor, NgIf],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .error {
+        color: red;
+      }
+
+      button {
+        width: 300px;
+        padding: 5px;
+        border-radius: 5px;
+      }
+
+      .search label {
+        margin-right: 15px;
+      }
+    `,
+  ],
   template: `
-    <div>
-      <label for="bookName">Choose Book by author or title</label>
+    <div class="search">
+      <label for="bookName">Search Book by author or title</label>
       <input
         type="text"
         id="bookName"
         name="bookName"
         [formControl]="searchBook"
         required />
+      <div class="error" *ngIf="searchBook.errors">
+        Search criteria is required!
+      </div>
     </div>
-    <div *ngIf="searchBook.errors">Search criteria is required!</div>
     <button
       routerLink="/shelf"
       [queryParams]="{ book: searchBook.value }"
       [disabled]="searchBook.errors"
       routerLinkActive="router-link-active">
-      Get book
+      Borrow
     </button>
-    <div>List of books available:</div>
-    <ul>
-      <li *ngFor="let book of books">{{ book.name }} by {{ book.author }}</li>
-    </ul>
+    <div>
+      <h3>List of books available:</h3>
+      <ul>
+        <li *ngFor="let book of books">{{ book.name }} by {{ book.author }}</li>
+      </ul>
+    </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

apps/router-testing/src/app/shelf.component.ts

@@ -1,20 +1,19 @@
 import { AsyncPipe, JsonPipe, NgFor } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs';
 import { availableBooks } from './book.model';
 
 @Component({
   selector: 'app-shelf',
   standalone: true,
-  imports: [AsyncPipe, JsonPipe, RouterLink, NgFor],
+  imports: [AsyncPipe, JsonPipe, NgFor],
   template: `
     <ul>
       <li *ngFor="let book of books | async">
-        Book: {{ book.name }} by {{ book.author }}
+        Borrowed Book: {{ book.name }} by {{ book.author }}
       </li>
     </ul>
-    <button routerLink="/">Go Back</button>
   `,
   styles: [],
   changeDetection: ChangeDetectionStrategy.OnPush,