diff --git a/projects/example-app/src/app/app.module.ts b/projects/example-app/src/app/app.config.ts
similarity index 50%
rename from projects/example-app/src/app/app.module.ts
rename to projects/example-app/src/app/app.config.ts
index 1f66f73f6a..2251b42d0d 100644
--- a/projects/example-app/src/app/app.module.ts
+++ b/projects/example-app/src/app/app.config.ts
@@ -1,40 +1,34 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
-import { StoreModule } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
-import { StoreRouterConnectingModule } from '@ngrx/router-store';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-
-import { AuthModule } from '@example-app/auth';
+import { provideState, provideStore } from '@ngrx/store';
+import { provideEffects } from '@ngrx/effects';
+import { provideRouterStore } from '@ngrx/router-store';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
 
 import { rootReducers, metaReducers } from '@example-app/reducers';
 
-import { CoreModule } from '@example-app/core';
-import { AppRoutingModule } from '@example-app/app-routing.module';
+import { APP_ROUTES } from '@example-app/app.routing';
 import { UserEffects, RouterEffects } from '@example-app/core/effects';
-import { AppComponent } from '@example-app/core/containers';
+import { provideRouter, withHashLocation } from '@angular/router';
+import * as fromAuth from '@example-app/auth/reducers';
+import { AuthEffects } from './auth/effects';
 
-@NgModule({
-  imports: [
-    CommonModule,
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
-    AuthModule,
-    AppRoutingModule,
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimations(),
+    provideHttpClient(),
+    provideRouter(APP_ROUTES, withHashLocation()),
 
     /**
-     * StoreModule.forRoot is imported once in the root module, accepting a reducer
+     * provideStore() is imported once in the root providers, accepting a reducer
      * function or object map of reducer functions. If passed an object of
      * reducers, combineReducers will be run creating your application
      * meta-reducer. This returns all providers for an @ngrx/store
      * based application.
      */
-    StoreModule.forRoot(rootReducers, {
+    provideStore(rootReducers, {
       metaReducers,
       runtimeChecks: {
         // strictStateImmutability and strictActionImmutability are enabled by default
@@ -48,7 +42,7 @@ import { AppComponent } from '@example-app/core/containers';
     /**
      * @ngrx/router-store keeps router state up-to-date in the store.
      */
-    StoreRouterConnectingModule.forRoot(),
+    provideRouterStore(),
 
     /**
      * Store devtools instrument the store retaining past versions of state
@@ -60,22 +54,27 @@ import { AppComponent } from '@example-app/core/containers';
      *
      * See: https://github.com/zalmoxisus/redux-devtools-extension
      */
-    StoreDevtoolsModule.instrument({
+    provideStoreDevtools({
       name: 'NgRx Book Store App',
       // In a production build you would want to disable the Store Devtools
       // logOnly: !isDevMode(),
     }),
 
     /**
-     * EffectsModule.forRoot() is imported once in the root module and
-     * sets up the effects class to be initialized immediately when the
-     * application starts.
+     * The provideEffects() function is used to register effect classes
+     * so they are initialized when the application starts.
      *
      * See: https://ngrx.io/guide/effects#registering-root-effects
      */
-    EffectsModule.forRoot(UserEffects, RouterEffects),
-    CoreModule,
+    provideEffects(UserEffects, RouterEffects, AuthEffects),
+
+    /**
+     * The Auth state is provided here to ensure that the login details
+     * is available as soon as the application starts.
+     */
+    provideState({
+      name: fromAuth.authFeatureKey,
+      reducer: fromAuth.reducers,
+    }),
   ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
+};
diff --git a/projects/example-app/src/app/app-routing.module.ts b/projects/example-app/src/app/app.routing.ts
similarity index 50%
rename from projects/example-app/src/app/app-routing.module.ts
rename to projects/example-app/src/app/app.routing.ts
index cba7ce2327..398d7de535 100644
--- a/projects/example-app/src/app/app-routing.module.ts
+++ b/projects/example-app/src/app/app.routing.ts
@@ -1,15 +1,19 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { authGuard } from '@example-app/auth/services';
 import { NotFoundPageComponent } from '@example-app/core/containers';
 
-export const routes: Routes = [
+export const APP_ROUTES: Routes = [
+  {
+    path: 'login',
+    loadChildren: () =>
+      import('@example-app/auth/auth.routing').then((m) => m.AUTH_ROUTES),
+  },
   { path: '', redirectTo: '/books', pathMatch: 'full' },
   {
     path: 'books',
     loadChildren: () =>
-      import('@example-app/books/books.module').then((m) => m.BooksModule),
+      import('@example-app/books/books.routing').then((m) => m.BOOKS_ROUTES),
     canActivate: [authGuard],
   },
   {
@@ -18,13 +22,3 @@ export const routes: Routes = [
     data: { title: 'Not found' },
   },
 ];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, {
-      useHash: true,
-    }),
-  ],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
diff --git a/projects/example-app/src/app/auth/auth-routing.module.ts b/projects/example-app/src/app/auth/auth-routing.module.ts
deleted file mode 100644
index 62ceda18b6..0000000000
--- a/projects/example-app/src/app/auth/auth-routing.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { LoginPageComponent } from '@example-app/auth/containers';
-
-const routes: Routes = [
-  { path: 'login', component: LoginPageComponent, data: { title: 'Login' } },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class AuthRoutingModule {}
diff --git a/projects/example-app/src/app/auth/auth.module.ts b/projects/example-app/src/app/auth/auth.module.ts
deleted file mode 100644
index 39527caa8a..0000000000
--- a/projects/example-app/src/app/auth/auth.module.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { StoreModule } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
-import { LoginPageComponent } from '@example-app/auth/containers';
-import {
-  LoginFormComponent,
-  LogoutConfirmationDialogComponent,
-} from '@example-app/auth/components';
-
-import { AuthEffects } from '@example-app/auth/effects';
-import * as fromAuth from '@example-app/auth/reducers';
-import { MaterialModule } from '@example-app/material';
-import { AuthRoutingModule } from './auth-routing.module';
-
-export const COMPONENTS = [
-  LoginPageComponent,
-  LoginFormComponent,
-  LogoutConfirmationDialogComponent,
-];
-
-@NgModule({
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    MaterialModule,
-    AuthRoutingModule,
-    StoreModule.forFeature({
-      name: fromAuth.authFeatureKey,
-      reducer: fromAuth.reducers,
-    }),
-    EffectsModule.forFeature(AuthEffects),
-  ],
-  declarations: COMPONENTS,
-})
-export class AuthModule {}
diff --git a/projects/example-app/src/app/auth/auth.routing.ts b/projects/example-app/src/app/auth/auth.routing.ts
new file mode 100644
index 0000000000..7197a2c553
--- /dev/null
+++ b/projects/example-app/src/app/auth/auth.routing.ts
@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+import { LoginPageComponent } from '@example-app/auth/containers';
+
+export const AUTH_ROUTES: Routes = [
+  {
+    path: '',
+    component: LoginPageComponent,
+    data: { title: 'Login' },
+  },
+];
diff --git a/projects/example-app/src/app/auth/components/login-form.component.ts b/projects/example-app/src/app/auth/components/login-form.component.ts
index 2357726616..269d298e86 100644
--- a/projects/example-app/src/app/auth/components/login-form.component.ts
+++ b/projects/example-app/src/app/auth/components/login-form.component.ts
@@ -1,9 +1,13 @@
+import { NgIf } from '@angular/common';
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Credentials } from '@example-app/auth/models';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-login-form',
+  imports: [MaterialModule, ReactiveFormsModule, NgIf],
   template: `
     <mat-card>
       <mat-card-title>Login</mat-card-title>
diff --git a/projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.ts b/projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.ts
index 1ee60f1102..eeff134db7 100644
--- a/projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.ts
+++ b/projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.ts
@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
+import { MaterialModule } from '@example-app/material';
 
 /**
  * The dialog will close with true if user clicks the ok button,
  * otherwise it will close with undefined.
  */
 @Component({
+  standalone: true,
+  imports: [MaterialModule],
   template: `
     <h2 mat-dialog-title>Logout</h2>
     <mat-dialog-content>Are you sure you want to logout?</mat-dialog-content>
diff --git a/projects/example-app/src/app/auth/containers/login-page.component.ts b/projects/example-app/src/app/auth/containers/login-page.component.ts
index d5dec368ee..e85d256c94 100644
--- a/projects/example-app/src/app/auth/containers/login-page.component.ts
+++ b/projects/example-app/src/app/auth/containers/login-page.component.ts
@@ -3,9 +3,13 @@ import { Store } from '@ngrx/store';
 import { Credentials } from '@example-app/auth/models';
 import * as fromAuth from '@example-app/auth/reducers';
 import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
+import { LoginFormComponent } from '../components';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-login-page',
+  imports: [LoginFormComponent, AsyncPipe],
   template: `
     <bc-login-form
       (submitted)="onSubmit($event)"
diff --git a/projects/example-app/src/app/auth/index.ts b/projects/example-app/src/app/auth/index.ts
deleted file mode 100644
index c5c262c905..0000000000
--- a/projects/example-app/src/app/auth/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './auth.module';
diff --git a/projects/example-app/src/app/books/books-routing.module.ts b/projects/example-app/src/app/books/books-routing.module.ts
deleted file mode 100644
index d04d377a93..0000000000
--- a/projects/example-app/src/app/books/books-routing.module.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import {
-  CollectionPageComponent,
-  FindBookPageComponent,
-  ViewBookPageComponent,
-} from '@example-app/books/containers';
-import { bookExistsGuard } from '@example-app/books/guards';
-
-export const routes: Routes = [
-  {
-    path: 'find',
-    component: FindBookPageComponent,
-    data: { title: 'Find book' },
-  },
-  {
-    path: ':id',
-    component: ViewBookPageComponent,
-    canActivate: [bookExistsGuard],
-    data: { title: 'Book details' },
-  },
-  {
-    path: '',
-    component: CollectionPageComponent,
-    data: { title: 'Collection' },
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class BooksRoutingModule {}
diff --git a/projects/example-app/src/app/books/books.module.ts b/projects/example-app/src/app/books/books.module.ts
deleted file mode 100644
index 0f00109339..0000000000
--- a/projects/example-app/src/app/books/books.module.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { EffectsModule } from '@ngrx/effects';
-import { StoreModule } from '@ngrx/store';
-
-import { BooksRoutingModule } from '@example-app/books/books-routing.module';
-import {
-  BookAuthorsComponent,
-  BookDetailComponent,
-  BookPreviewComponent,
-  BookPreviewListComponent,
-  BookSearchComponent,
-} from '@example-app/books/components';
-import {
-  CollectionPageComponent,
-  FindBookPageComponent,
-  SelectedBookPageComponent,
-  ViewBookPageComponent,
-} from '@example-app/books/containers';
-import { BookEffects, CollectionEffects } from '@example-app/books/effects';
-
-import * as fromBooks from '@example-app/books/reducers';
-import { MaterialModule } from '@example-app/material';
-import { PipesModule } from '@example-app/shared/pipes';
-
-export const COMPONENTS = [
-  BookAuthorsComponent,
-  BookDetailComponent,
-  BookPreviewComponent,
-  BookPreviewListComponent,
-  BookSearchComponent,
-];
-
-export const CONTAINERS = [
-  FindBookPageComponent,
-  ViewBookPageComponent,
-  SelectedBookPageComponent,
-  CollectionPageComponent,
-];
-
-@NgModule({
-  imports: [
-    CommonModule,
-    MaterialModule,
-    BooksRoutingModule,
-
-    /**
-     * StoreModule.forFeature is used for composing state
-     * from feature modules. These modules can be loaded
-     * eagerly or lazily and will be dynamically added to
-     * the existing state.
-     */
-    StoreModule.forFeature(fromBooks.booksFeatureKey, fromBooks.reducers),
-
-    /**
-     * Effects.forFeature is used to register effects
-     * from feature modules. Effects can be loaded
-     * eagerly or lazily and will be started immediately.
-     *
-     * All Effects will only be instantiated once regardless of
-     * whether they are registered once or multiple times.
-     */
-    EffectsModule.forFeature(BookEffects, CollectionEffects),
-    PipesModule,
-  ],
-  declarations: [COMPONENTS, CONTAINERS],
-})
-export class BooksModule {}
diff --git a/projects/example-app/src/app/books/books.routing.ts b/projects/example-app/src/app/books/books.routing.ts
new file mode 100644
index 0000000000..7767e91619
--- /dev/null
+++ b/projects/example-app/src/app/books/books.routing.ts
@@ -0,0 +1,54 @@
+import { Routes } from '@angular/router';
+
+import {
+  CollectionPageComponent,
+  FindBookPageComponent,
+  ViewBookPageComponent,
+} from '@example-app/books/containers';
+import { bookExistsGuard } from '@example-app/books/guards';
+import { provideState } from '@ngrx/store';
+import * as fromBooks from '@example-app/books/reducers';
+import { provideEffects } from '@ngrx/effects';
+import { BookEffects, CollectionEffects } from './effects';
+
+export const BOOKS_ROUTES: Routes = [
+  {
+    path: '',
+    providers: [
+      /**
+       * provideState() is used for composing state
+       * from feature modules. These modules can be loaded
+       * eagerly or lazily and will be dynamically added to
+       * the existing state.
+       */
+      provideState(fromBooks.booksFeatureKey, fromBooks.reducers),
+      /**
+       * provideEffects() is used to register effects
+       * from feature modules. Effects can be loaded
+       * eagerly or lazily and will be started immediately.
+       *
+       * All Effects will only be instantiated once regardless of
+       * whether they are registered once or multiple times.
+       */
+      provideEffects(BookEffects, CollectionEffects),
+    ],
+    children: [
+      {
+        path: 'find',
+        component: FindBookPageComponent,
+        data: { title: 'Find book' },
+      },
+      {
+        path: ':id',
+        component: ViewBookPageComponent,
+        canActivate: [bookExistsGuard],
+        data: { title: 'Book details' },
+      },
+      {
+        path: '',
+        component: CollectionPageComponent,
+        data: { title: 'Collection' },
+      },
+    ],
+  },
+];
diff --git a/projects/example-app/src/app/books/components/book-authors.component.ts b/projects/example-app/src/app/books/components/book-authors.component.ts
index 2fb72a9ef3..5a59cb23bd 100644
--- a/projects/example-app/src/app/books/components/book-authors.component.ts
+++ b/projects/example-app/src/app/books/components/book-authors.component.ts
@@ -1,9 +1,13 @@
 import { Component, Input } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
+import { MaterialModule } from '@example-app/material';
+import { AddCommasPipe } from '@example-app/shared/pipes/add-commas.pipe';
 
 @Component({
+  standalone: true,
   selector: 'bc-book-authors',
+  imports: [MaterialModule, AddCommasPipe],
   template: `
     <h5 mat-subheader>Written By:</h5>
     <span>
diff --git a/projects/example-app/src/app/books/components/book-detail.component.ts b/projects/example-app/src/app/books/components/book-detail.component.ts
index ae1c59958f..3453300464 100644
--- a/projects/example-app/src/app/books/components/book-detail.component.ts
+++ b/projects/example-app/src/app/books/components/book-detail.component.ts
@@ -1,9 +1,14 @@
+import { NgIf } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
+import { MaterialModule } from '@example-app/material';
+import { BookAuthorsComponent } from './book-authors.component';
 
 @Component({
+  standalone: true,
   selector: 'bc-book-detail',
+  imports: [MaterialModule, NgIf, BookAuthorsComponent],
   template: `
     <mat-card *ngIf="book">
       <mat-card-title-group>
diff --git a/projects/example-app/src/app/books/components/book-preview-list.component.ts b/projects/example-app/src/app/books/components/book-preview-list.component.ts
index b93c3e83e7..7ef391e47e 100644
--- a/projects/example-app/src/app/books/components/book-preview-list.component.ts
+++ b/projects/example-app/src/app/books/components/book-preview-list.component.ts
@@ -1,9 +1,13 @@
 import { Component, Input } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
+import { BookPreviewComponent } from './book-preview.component';
+import { NgFor } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-book-preview-list',
+  imports: [BookPreviewComponent, NgFor],
   template: `
     <bc-book-preview *ngFor="let book of books" [book]="book"></bc-book-preview>
   `,
diff --git a/projects/example-app/src/app/books/components/book-preview.component.ts b/projects/example-app/src/app/books/components/book-preview.component.ts
index 41a5f4c14d..eb56168424 100644
--- a/projects/example-app/src/app/books/components/book-preview.component.ts
+++ b/projects/example-app/src/app/books/components/book-preview.component.ts
@@ -1,9 +1,22 @@
 import { Component, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 import { Book } from '@example-app/books/models';
+import { MaterialModule } from '@example-app/material';
+import { EllipsisPipe } from '@example-app/shared/pipes/ellipsis.pipe';
+import { BookAuthorsComponent } from './book-authors.component';
+import { NgIf } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-book-preview',
+  imports: [
+    MaterialModule,
+    RouterLink,
+    EllipsisPipe,
+    BookAuthorsComponent,
+    NgIf,
+  ],
   template: `
     <a [routerLink]="['/books', id]">
       <mat-card>
diff --git a/projects/example-app/src/app/books/components/book-search.component.ts b/projects/example-app/src/app/books/components/book-search.component.ts
index 1ae6822056..28c4f161d7 100644
--- a/projects/example-app/src/app/books/components/book-search.component.ts
+++ b/projects/example-app/src/app/books/components/book-search.component.ts
@@ -1,7 +1,11 @@
+import { NgIf } from '@angular/common';
 import { Component, Output, Input, EventEmitter } from '@angular/core';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-book-search',
+  imports: [MaterialModule, NgIf],
   template: `
     <mat-card>
       <mat-card-title>Find a Book</mat-card-title>
diff --git a/projects/example-app/src/app/books/containers/collection-page.component.ts b/projects/example-app/src/app/books/containers/collection-page.component.ts
index 48acf84839..c0e6308cfd 100644
--- a/projects/example-app/src/app/books/containers/collection-page.component.ts
+++ b/projects/example-app/src/app/books/containers/collection-page.component.ts
@@ -6,10 +6,15 @@ import { Observable } from 'rxjs';
 import { CollectionPageActions } from '@example-app/books/actions/collection-page.actions';
 import { Book } from '@example-app/books/models';
 import * as fromBooks from '@example-app/books/reducers';
+import { MaterialModule } from '@example-app/material';
+import { BookPreviewListComponent } from '../components';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-collection-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MaterialModule, BookPreviewListComponent, AsyncPipe],
   template: `
     <mat-card>
       <mat-card-title>My Collection</mat-card-title>
diff --git a/projects/example-app/src/app/books/containers/find-book-page.component.ts b/projects/example-app/src/app/books/containers/find-book-page.component.ts
index 254727e58f..86ba1f132b 100644
--- a/projects/example-app/src/app/books/containers/find-book-page.component.ts
+++ b/projects/example-app/src/app/books/containers/find-book-page.component.ts
@@ -7,10 +7,14 @@ import { take } from 'rxjs/operators';
 import { FindBookPageActions } from '@example-app/books/actions/find-book-page.actions';
 import { Book } from '@example-app/books/models';
 import * as fromBooks from '@example-app/books/reducers';
+import { BookPreviewListComponent, BookSearchComponent } from '../components';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-find-book-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BookSearchComponent, AsyncPipe, BookPreviewListComponent],
   template: `
     <bc-book-search
       [query]="(searchQuery$ | async)!"
diff --git a/projects/example-app/src/app/books/containers/selected-book-page.component.ts b/projects/example-app/src/app/books/containers/selected-book-page.component.ts
index 292666869b..e16ba31976 100644
--- a/projects/example-app/src/app/books/containers/selected-book-page.component.ts
+++ b/projects/example-app/src/app/books/containers/selected-book-page.component.ts
@@ -6,10 +6,14 @@ import { Observable } from 'rxjs';
 import { SelectedBookPageActions } from '@example-app/books/actions/selected-book-page.actions';
 import { Book } from '@example-app/books/models';
 import * as fromBooks from '@example-app/books/reducers';
+import { BookDetailComponent } from '../components';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-selected-book-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BookDetailComponent, AsyncPipe],
   template: `
     <bc-book-detail
       [book]="(book$ | async)!"
diff --git a/projects/example-app/src/app/books/containers/view-book-page.component.ts b/projects/example-app/src/app/books/containers/view-book-page.component.ts
index f4bf63b54c..a6295f1860 100644
--- a/projects/example-app/src/app/books/containers/view-book-page.component.ts
+++ b/projects/example-app/src/app/books/containers/view-book-page.component.ts
@@ -5,6 +5,7 @@ import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { ViewBookPageActions } from '@example-app/books/actions/view-book-page.actions';
+import { SelectedBookPageComponent } from './selected-book-page.component';
 
 /**
  * Note: Container components are also reusable. Whether or not
@@ -17,8 +18,10 @@ import { ViewBookPageActions } from '@example-app/books/actions/view-book-page.a
  * SelectedBookPageComponent
  */
 @Component({
+  standalone: true,
   selector: 'bc-view-book-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SelectedBookPageComponent],
   template: ` <bc-selected-book-page></bc-selected-book-page> `,
 })
 export class ViewBookPageComponent implements OnDestroy {
diff --git a/projects/example-app/src/app/core/components/layout.component.ts b/projects/example-app/src/app/core/components/layout.component.ts
index 0975f50bd0..8510b0f925 100644
--- a/projects/example-app/src/app/core/components/layout.component.ts
+++ b/projects/example-app/src/app/core/components/layout.component.ts
@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-layout',
+  imports: [MaterialModule],
   template: `
     <mat-sidenav-container fullscreen>
       <ng-content></ng-content>
diff --git a/projects/example-app/src/app/core/components/nav-item.component.ts b/projects/example-app/src/app/core/components/nav-item.component.ts
index 535d744b94..28e8753929 100644
--- a/projects/example-app/src/app/core/components/nav-item.component.ts
+++ b/projects/example-app/src/app/core/components/nav-item.component.ts
@@ -1,7 +1,12 @@
+import { NgIf } from '@angular/common';
 import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-nav-item',
+  imports: [MaterialModule, RouterLink, NgIf],
   template: `
     <a mat-list-item [routerLink]="routerLink" (click)="navigate.emit()">
       <mat-icon matListItemIcon>{{ icon }}</mat-icon>
diff --git a/projects/example-app/src/app/core/components/sidenav.component.ts b/projects/example-app/src/app/core/components/sidenav.component.ts
index a9f4c1c103..702433fff2 100644
--- a/projects/example-app/src/app/core/components/sidenav.component.ts
+++ b/projects/example-app/src/app/core/components/sidenav.component.ts
@@ -1,7 +1,10 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-sidenav',
+  imports: [MaterialModule],
   template: `
     <mat-sidenav
       #sidenav
diff --git a/projects/example-app/src/app/core/components/toolbar.component.ts b/projects/example-app/src/app/core/components/toolbar.component.ts
index 86f22f6e47..d69fd96564 100644
--- a/projects/example-app/src/app/core/components/toolbar.component.ts
+++ b/projects/example-app/src/app/core/components/toolbar.component.ts
@@ -1,7 +1,10 @@
 import { Component, Output, EventEmitter } from '@angular/core';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-toolbar',
+  imports: [MaterialModule],
   template: `
     <mat-toolbar color="primary">
       <button mat-icon-button (click)="openMenu.emit()" aria-label="menu">
diff --git a/projects/example-app/src/app/core/containers/app.component.ts b/projects/example-app/src/app/core/containers/app.component.ts
index 46a26eb8f0..ec3268f364 100644
--- a/projects/example-app/src/app/core/containers/app.component.ts
+++ b/projects/example-app/src/app/core/containers/app.component.ts
@@ -6,10 +6,29 @@ import { AuthActions } from '@example-app/auth/actions/auth.actions';
 import * as fromAuth from '@example-app/auth/reducers';
 import * as fromRoot from '@example-app/reducers';
 import { LayoutActions } from '@example-app/core/actions/layout.actions';
+import {
+  LayoutComponent,
+  NavItemComponent,
+  SidenavComponent,
+  ToolbarComponent,
+} from '../components';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { AsyncPipe, NgIf } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-app',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    RouterOutlet,
+    NgIf,
+    AsyncPipe,
+    RouterLink,
+    LayoutComponent,
+    SidenavComponent,
+    NavItemComponent,
+    ToolbarComponent,
+  ],
   template: `
     <bc-layout>
       <bc-sidenav [open]="(showSidenav$ | async)!" (closeMenu)="closeSidenav()">
diff --git a/projects/example-app/src/app/core/containers/not-found-page.component.ts b/projects/example-app/src/app/core/containers/not-found-page.component.ts
index fb61d30cf5..79e0d34b45 100644
--- a/projects/example-app/src/app/core/containers/not-found-page.component.ts
+++ b/projects/example-app/src/app/core/containers/not-found-page.component.ts
@@ -1,8 +1,12 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-not-found-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MaterialModule, RouterLink],
   template: `
     <mat-card>
       <mat-card-title>404: Not Found</mat-card-title>
diff --git a/projects/example-app/src/app/core/core.module.ts b/projects/example-app/src/app/core/core.module.ts
deleted file mode 100644
index 546403a618..0000000000
--- a/projects/example-app/src/app/core/core.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-
-import { MaterialModule } from '@example-app/material';
-import {
-  LayoutComponent,
-  NavItemComponent,
-  SidenavComponent,
-  ToolbarComponent,
-} from '@example-app/core/components';
-import {
-  AppComponent,
-  NotFoundPageComponent,
-} from '@example-app/core/containers';
-
-export const COMPONENTS = [
-  AppComponent,
-  NotFoundPageComponent,
-  LayoutComponent,
-  NavItemComponent,
-  SidenavComponent,
-  ToolbarComponent,
-];
-
-@NgModule({
-  imports: [CommonModule, RouterModule, MaterialModule],
-  declarations: COMPONENTS,
-  exports: COMPONENTS,
-})
-export class CoreModule {}
diff --git a/projects/example-app/src/app/material/material.module.ts b/projects/example-app/src/app/material/material.module.ts
index 734b31afb3..bf569067a6 100644
--- a/projects/example-app/src/app/material/material.module.ts
+++ b/projects/example-app/src/app/material/material.module.ts
@@ -1,5 +1,3 @@
-import { NgModule } from '@angular/core';
-
 import { MatInputModule } from '@angular/material/input';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
@@ -10,28 +8,14 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
-@NgModule({
-  imports: [
-    MatInputModule,
-    MatCardModule,
-    MatButtonModule,
-    MatSidenavModule,
-    MatListModule,
-    MatIconModule,
-    MatToolbarModule,
-    MatProgressSpinnerModule,
-    MatDialogModule,
-  ],
-  exports: [
-    MatInputModule,
-    MatCardModule,
-    MatButtonModule,
-    MatSidenavModule,
-    MatListModule,
-    MatIconModule,
-    MatToolbarModule,
-    MatProgressSpinnerModule,
-    MatDialogModule,
-  ],
-})
-export class MaterialModule {}
+export const MaterialModule = [
+  MatInputModule,
+  MatCardModule,
+  MatButtonModule,
+  MatSidenavModule,
+  MatListModule,
+  MatIconModule,
+  MatToolbarModule,
+  MatProgressSpinnerModule,
+  MatDialogModule,
+];
diff --git a/projects/example-app/src/app/shared/pipes/add-commas.pipe.ts b/projects/example-app/src/app/shared/pipes/add-commas.pipe.ts
index b64b4209c0..5f7dad2a35 100644
--- a/projects/example-app/src/app/shared/pipes/add-commas.pipe.ts
+++ b/projects/example-app/src/app/shared/pipes/add-commas.pipe.ts
@@ -1,6 +1,9 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({ name: 'bcAddCommas' })
+@Pipe({
+  standalone: true,
+  name: 'bcAddCommas',
+})
 export class AddCommasPipe implements PipeTransform {
   transform(authors: null | string[]) {
     if (!authors) {
diff --git a/projects/example-app/src/app/shared/pipes/ellipsis.pipe.ts b/projects/example-app/src/app/shared/pipes/ellipsis.pipe.ts
index f92a414b65..cd1170f2ec 100644
--- a/projects/example-app/src/app/shared/pipes/ellipsis.pipe.ts
+++ b/projects/example-app/src/app/shared/pipes/ellipsis.pipe.ts
@@ -1,6 +1,9 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({ name: 'bcEllipsis' })
+@Pipe({
+  standalone: true,
+  name: 'bcEllipsis',
+})
 export class EllipsisPipe implements PipeTransform {
   transform(str: string, strLength = 250) {
     const withoutHtml = str.replace(/(<([^>]+)>)/gi, '');
diff --git a/projects/example-app/src/main.ts b/projects/example-app/src/main.ts
index 1d91a20a57..6a1ec69979 100644
--- a/projects/example-app/src/main.ts
+++ b/projects/example-app/src/main.ts
@@ -1,6 +1,5 @@
-import './polyfills';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/core/containers/app.component';
+import { appConfig } from './app/app.config';
 
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
+bootstrapApplication(AppComponent, appConfig);