Lazy loading route remains unchanged even after passing id - html

Question

Library is the parent component. In Home page, when I click on Library icon, I am led to Library page with URL localhost:4200/library, which is expected. In Library page, there's list of books. When I click on a book, I am led to book details of the selected book. However, the URL still remains localhost:4200/library which I would like to change to localhost:4200/library/book/selected-book-id.
Here's my attempt at it. The problem is the URL still remains localhost:4200/library, I would really appreciate some guidance.
library.routing.module.ts
const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: LibraryComponent
},
{
path: '**',
redirectTo: ''
},
{
path: 'library/book/:selectedBookId',
component: BookComponent
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LibraryRoutingModule {}
library-list.component.html
<div content class="content">
<scroll-viewer
class="library-list"
>
<mat-list data-custom-parent-group="LibraryList" data-custom-parentid="library-list">
<div class="loading" *ngIf="!ready">
<waiting-spinner
[size]="waitingSpinnerSize.Medium"
></waiting-spinner>
</div>
<ng-container *ngIf="ready">
<mat-list-item role="listitem" *ngFor="let book of library" style="margin-bottom: 2rem;height: auto;">
<button
mat-raised-button
class="menu-button"
[routerLink]="['/', 'library', '/', 'book', '/', book.id]"
routerLinkActive="active"
[ngClass]="{
unknown: true,
valid: false,
warning: false,
issue: false
}"
(click)="selectBook(book)"
[attr.data-custom-name]="book.id"
[attr.data-custom-name]="book.name"
[attr.data-custom-bhvr]="'Book'">
<div style="display: flex;place-content: space-between;align-items: center;line-height: 7rem;">
<div style="display: flex;">
<div class="book-subitem">
<div class="book-element">
<div class="book-name">Book: </div>
</div>
</div>
</div>
</div>
</button>
</mat-list-item>
<router-outlet></router-outlet>>
</ng-container>
</mat-list>
</scroll-viewer>
<mat-paginator #paginator class="paginator" [length]="resultsLength" [pageSize]="pageLength" [pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="updatePage($event)"></mat-paginator>
</div>
</daui-layout-filter>