From b7c3495f175fd1048494f3f4113f349b34486293 Mon Sep 17 00:00:00 2001
From: Michal Grzegorczyk <michalgrzegorczyk.dev@gmail.com>
Date: Sun, 17 Nov 2024 18:40:02 +0100
Subject: [PATCH] feat: migrate module to standalone components

---
 .../src/app/app.component.ts                  |  6 +++-
 .../src/app/app.module.ts                     | 11 -------
 .../31-module-to-standalone/src/main.ts       | 13 ++++----
 .../admin/feature/src/index.ts                |  2 +-
 .../feature/src/lib/admin-feature.module.ts   | 27 -----------------
 .../feature/src/lib/admin-feature.routes.ts   | 18 +++++++++++
 .../lib/create-user/create-user.component.ts  | 15 +++-------
 .../src/lib/dashboard/dashboard.component.ts  | 15 +++-------
 .../admin/shared/src/lib/authorized.guard.ts  | 30 +++++++------------
 .../forbidden/src/index.ts                    |  2 +-
 .../forbidden/src/lib/forbidden.component.ts  |  1 +
 .../forbidden/src/lib/forbidden.module.ts     | 13 --------
 libs/module-to-standalone/home/src/index.ts   |  2 +-
 .../home/src/lib/home.component.ts            | 15 +++++-----
 .../home/src/lib/home.module.ts               | 13 --------
 libs/module-to-standalone/shell/src/index.ts  |  2 +-
 .../shell/src/lib/main-shell.module.ts        | 11 -------
 .../shell/src/lib/main-shell.routes.ts        | 17 +++++------
 .../user/contact/src/index.ts                 |  2 +-
 .../contact/src/lib/contact-feature.module.ts | 27 -----------------
 .../contact/src/lib/contact-feature.routes.ts | 16 ++++++++++
 .../create-contact.component.ts               | 14 +++------
 .../src/lib/dashboard/dashboard.component.ts  | 16 ++++------
 .../user/home/src/index.ts                    |  2 +-
 .../user/home/src/lib/home.component.ts       |  1 +
 .../user/home/src/lib/home.module.ts          | 11 -------
 .../user/shell/src/index.ts                   |  3 +-
 .../shell/src/lib/user-shell.component.ts     |  9 ++++--
 .../user/shell/src/lib/user-shell.module.ts   | 13 --------
 .../user/shell/src/lib/user-shell.routes.ts   | 12 ++++----
 30 files changed, 115 insertions(+), 224 deletions(-)
 delete mode 100644 apps/angular/31-module-to-standalone/src/app/app.module.ts
 delete mode 100644 libs/module-to-standalone/admin/feature/src/lib/admin-feature.module.ts
 create mode 100644 libs/module-to-standalone/admin/feature/src/lib/admin-feature.routes.ts
 delete mode 100644 libs/module-to-standalone/forbidden/src/lib/forbidden.module.ts
 delete mode 100644 libs/module-to-standalone/home/src/lib/home.module.ts
 delete mode 100644 libs/module-to-standalone/shell/src/lib/main-shell.module.ts
 delete mode 100644 libs/module-to-standalone/user/contact/src/lib/contact-feature.module.ts
 create mode 100644 libs/module-to-standalone/user/contact/src/lib/contact-feature.routes.ts
 delete mode 100644 libs/module-to-standalone/user/home/src/lib/home.module.ts
 delete mode 100644 libs/module-to-standalone/user/shell/src/lib/user-shell.module.ts

diff --git a/apps/angular/31-module-to-standalone/src/app/app.component.ts b/apps/angular/31-module-to-standalone/src/app/app.component.ts
index 95eeab5b9..7cda58f92 100644
--- a/apps/angular/31-module-to-standalone/src/app/app.component.ts
+++ b/apps/angular/31-module-to-standalone/src/app/app.component.ts
@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink],
   template: `
     <div class="flex gap-2">
       <button
@@ -20,7 +23,8 @@ import { Component } from '@angular/core';
         User
       </button>
     </div>
-    <router-outlet></router-outlet>
+
+    <router-outlet />
   `,
   host: {
     class: 'flex flex-col p-4 gap-3',
diff --git a/apps/angular/31-module-to-standalone/src/app/app.module.ts b/apps/angular/31-module-to-standalone/src/app/app.module.ts
deleted file mode 100644
index c795a11b9..000000000
--- a/apps/angular/31-module-to-standalone/src/app/app.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { MainShellModule } from '@angular-challenges/module-to-standalone/shell';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, MainShellModule],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
diff --git a/apps/angular/31-module-to-standalone/src/main.ts b/apps/angular/31-module-to-standalone/src/main.ts
index 16de2365d..07b6567f0 100644
--- a/apps/angular/31-module-to-standalone/src/main.ts
+++ b/apps/angular/31-module-to-standalone/src/main.ts
@@ -1,6 +1,9 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import { provideToken } from '@angular-challenges/module-to-standalone/core/providers';
+import { appRoutes } from '@angular-challenges/module-to-standalone/shell';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+import { AppComponent } from './app/app.component';
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [provideRouter(appRoutes), provideToken('main-shell-token')],
+}).catch((err) => console.error(err));
diff --git a/libs/module-to-standalone/admin/feature/src/index.ts b/libs/module-to-standalone/admin/feature/src/index.ts
index 76c8330f9..799b7a973 100644
--- a/libs/module-to-standalone/admin/feature/src/index.ts
+++ b/libs/module-to-standalone/admin/feature/src/index.ts
@@ -1 +1 @@
-export * from './lib/admin-feature.module';
+export { ADMIN_ROUTES } from './lib/admin-feature.routes';
diff --git a/libs/module-to-standalone/admin/feature/src/lib/admin-feature.module.ts b/libs/module-to-standalone/admin/feature/src/lib/admin-feature.module.ts
deleted file mode 100644
index 84e893eeb..000000000
--- a/libs/module-to-standalone/admin/feature/src/lib/admin-feature.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-@NgModule({
-  declarations: [],
-  imports: [
-    CommonModule,
-    RouterModule.forChild([
-      {
-        path: '',
-        loadChildren: () =>
-          import('./dashboard/dashboard.component').then(
-            (m) => m.DashboardModule,
-          ),
-      },
-      {
-        path: 'create-user',
-        loadChildren: () =>
-          import('./create-user/create-user.component').then(
-            (m) => m.CreateUserModule,
-          ),
-      },
-    ]),
-  ],
-})
-export class AdminFeatureModule {}
diff --git a/libs/module-to-standalone/admin/feature/src/lib/admin-feature.routes.ts b/libs/module-to-standalone/admin/feature/src/lib/admin-feature.routes.ts
new file mode 100644
index 000000000..9a6115a38
--- /dev/null
+++ b/libs/module-to-standalone/admin/feature/src/lib/admin-feature.routes.ts
@@ -0,0 +1,18 @@
+import { Routes } from '@angular/router';
+
+export const ADMIN_ROUTES: Routes = [
+  {
+    path: '',
+    loadComponent: () =>
+      import('./dashboard/dashboard.component').then(
+        (m) => m.DashboardComponent,
+      ),
+  },
+  {
+    path: 'create-user',
+    loadComponent: () =>
+      import('./create-user/create-user.component').then(
+        (m) => m.CreateUserComponent,
+      ),
+  },
+];
diff --git a/libs/module-to-standalone/admin/feature/src/lib/create-user/create-user.component.ts b/libs/module-to-standalone/admin/feature/src/lib/create-user/create-user.component.ts
index e3670935c..6b28ee2db 100644
--- a/libs/module-to-standalone/admin/feature/src/lib/create-user/create-user.component.ts
+++ b/libs/module-to-standalone/admin/feature/src/lib/create-user/create-user.component.ts
@@ -1,11 +1,12 @@
-import { Component, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'lib-create-user',
+  standalone: true,
+  imports: [RouterLink],
   template: `
     Create User Form
-
     <button
       routerLink=".."
       class="ml-5 rounded-lg border bg-gray-700 p-2 text-white">
@@ -14,11 +15,3 @@ import { RouterModule } from '@angular/router';
   `,
 })
 export class CreateUserComponent {}
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([{ path: '', component: CreateUserComponent }]),
-  ],
-  declarations: [CreateUserComponent],
-})
-export class CreateUserModule {}
diff --git a/libs/module-to-standalone/admin/feature/src/lib/dashboard/dashboard.component.ts b/libs/module-to-standalone/admin/feature/src/lib/dashboard/dashboard.component.ts
index d8e3d92f7..15ac0903c 100644
--- a/libs/module-to-standalone/admin/feature/src/lib/dashboard/dashboard.component.ts
+++ b/libs/module-to-standalone/admin/feature/src/lib/dashboard/dashboard.component.ts
@@ -1,11 +1,12 @@
-import { Component, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'lib-dashboard',
+  standalone: true,
+  imports: [RouterLink],
   template: `
     Dashboard
-
     <button
       routerLink="create-user"
       class="ml-10 rounded-lg border bg-gray-700 p-2 text-white">
@@ -14,11 +15,3 @@ import { RouterModule } from '@angular/router';
   `,
 })
 export class DashboardComponent {}
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([{ path: '', component: DashboardComponent }]),
-  ],
-  declarations: [DashboardComponent],
-})
-export class DashboardModule {}
diff --git a/libs/module-to-standalone/admin/shared/src/lib/authorized.guard.ts b/libs/module-to-standalone/admin/shared/src/lib/authorized.guard.ts
index 006dea2f3..c2b58a51d 100644
--- a/libs/module-to-standalone/admin/shared/src/lib/authorized.guard.ts
+++ b/libs/module-to-standalone/admin/shared/src/lib/authorized.guard.ts
@@ -1,23 +1,15 @@
-import { CanActivate, Router, UrlTree } from '@angular/router';
-
 import { AuthorizationService } from '@angular-challenges/module-to-standalone/core/service';
-import { Injectable } from '@angular/core';
+import { inject } from '@angular/core';
+import { Router, UrlTree } from '@angular/router';
 import { Observable, map } from 'rxjs';
 
-@Injectable({
-  providedIn: 'root',
-})
-export class IsAuthorizedGuard implements CanActivate {
-  constructor(
-    private authorizationService: AuthorizationService,
-    private router: Router,
-  ) {}
+export const isAuthorizedGuard = (): Observable<boolean | UrlTree> => {
+  const authorizationService = inject(AuthorizationService);
+  const router = inject(Router);
 
-  canActivate(): Observable<boolean | UrlTree> {
-    return this.authorizationService.isAuthorized$.pipe(
-      map((isAuthorized) =>
-        isAuthorized ? true : this.router.createUrlTree(['forbidden']),
-      ),
-    );
-  }
-}
+  return authorizationService.isAuthorized$.pipe(
+    map((isAuthorized) =>
+      isAuthorized ? true : router.createUrlTree(['forbidden']),
+    ),
+  );
+};
diff --git a/libs/module-to-standalone/forbidden/src/index.ts b/libs/module-to-standalone/forbidden/src/index.ts
index 672622f64..3eb7b4df5 100644
--- a/libs/module-to-standalone/forbidden/src/index.ts
+++ b/libs/module-to-standalone/forbidden/src/index.ts
@@ -1 +1 @@
-export * from './lib/forbidden.module';
+export { ForbiddenComponent } from './lib/forbidden.component';
diff --git a/libs/module-to-standalone/forbidden/src/lib/forbidden.component.ts b/libs/module-to-standalone/forbidden/src/lib/forbidden.component.ts
index 755cd1516..23780db6a 100644
--- a/libs/module-to-standalone/forbidden/src/lib/forbidden.component.ts
+++ b/libs/module-to-standalone/forbidden/src/lib/forbidden.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'lib-home',
+  standalone: true,
   template: `
     Forbidden component
   `,
diff --git a/libs/module-to-standalone/forbidden/src/lib/forbidden.module.ts b/libs/module-to-standalone/forbidden/src/lib/forbidden.module.ts
deleted file mode 100644
index 0b363bf04..000000000
--- a/libs/module-to-standalone/forbidden/src/lib/forbidden.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { ForbiddenComponent } from './forbidden.component';
-
-@NgModule({
-  declarations: [ForbiddenComponent],
-  imports: [
-    CommonModule,
-    RouterModule.forChild([{ path: '', component: ForbiddenComponent }]),
-  ],
-})
-export class ForbiddenModule {}
diff --git a/libs/module-to-standalone/home/src/index.ts b/libs/module-to-standalone/home/src/index.ts
index fe97ad579..74a54c60b 100644
--- a/libs/module-to-standalone/home/src/index.ts
+++ b/libs/module-to-standalone/home/src/index.ts
@@ -1 +1 @@
-export * from './lib/home.module';
+export { HomeComponent } from './lib/home.component';
diff --git a/libs/module-to-standalone/home/src/lib/home.component.ts b/libs/module-to-standalone/home/src/lib/home.component.ts
index 8a417c5be..b9e89c153 100644
--- a/libs/module-to-standalone/home/src/lib/home.component.ts
+++ b/libs/module-to-standalone/home/src/lib/home.component.ts
@@ -1,18 +1,21 @@
 import { TOKEN } from '@angular-challenges/module-to-standalone/core/providers';
 import { AuthorizationService } from '@angular-challenges/module-to-standalone/core/service';
-import { Component, Inject } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
 
 @Component({
   selector: 'lib-home',
+  standalone: true,
+  imports: [AsyncPipe],
   template: `
     Home component
 
     <section class="flex items-center gap-5">
       Authorization :
-      <button class="border p-2  " (click)="authorizeService.authorize()">
+      <button class="border p-2" (click)="authorizeService.authorize()">
         Authorize
       </button>
-      <button class="border p-2  " (click)="authorizeService.forbid()">
+      <button class="border p-2" (click)="authorizeService.forbid()">
         Forbid
       </button>
       (isAuthorized: {{ authorizeService.isAuthorized$ | async }})
@@ -22,8 +25,6 @@ import { Component, Inject } from '@angular/core';
   `,
 })
 export class HomeComponent {
-  constructor(
-    public authorizeService: AuthorizationService,
-    @Inject(TOKEN) public token: string,
-  ) {}
+  protected authorizeService = inject(AuthorizationService);
+  protected token = inject(TOKEN);
 }
diff --git a/libs/module-to-standalone/home/src/lib/home.module.ts b/libs/module-to-standalone/home/src/lib/home.module.ts
deleted file mode 100644
index 30ae1ea8a..000000000
--- a/libs/module-to-standalone/home/src/lib/home.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { HomeComponent } from './home.component';
-
-@NgModule({
-  declarations: [HomeComponent],
-  imports: [
-    RouterModule.forChild([{ path: '', component: HomeComponent }]),
-    CommonModule,
-  ],
-})
-export class ModuleToStandaloneHomeModule {}
diff --git a/libs/module-to-standalone/shell/src/index.ts b/libs/module-to-standalone/shell/src/index.ts
index 494d4096f..902420448 100644
--- a/libs/module-to-standalone/shell/src/index.ts
+++ b/libs/module-to-standalone/shell/src/index.ts
@@ -1 +1 @@
-export * from './lib/main-shell.module';
+export * from './lib/main-shell.routes';
diff --git a/libs/module-to-standalone/shell/src/lib/main-shell.module.ts b/libs/module-to-standalone/shell/src/lib/main-shell.module.ts
deleted file mode 100644
index e886da911..000000000
--- a/libs/module-to-standalone/shell/src/lib/main-shell.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { provideToken } from '@angular-challenges/module-to-standalone/core/providers';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { appRoutes } from './main-shell.routes';
-
-@NgModule({
-  imports: [RouterModule.forRoot(appRoutes)],
-  exports: [RouterModule],
-  providers: [provideToken('main-shell-token')],
-})
-export class MainShellModule {}
diff --git a/libs/module-to-standalone/shell/src/lib/main-shell.routes.ts b/libs/module-to-standalone/shell/src/lib/main-shell.routes.ts
index 84f9a8d03..3fd61638a 100644
--- a/libs/module-to-standalone/shell/src/lib/main-shell.routes.ts
+++ b/libs/module-to-standalone/shell/src/lib/main-shell.routes.ts
@@ -1,36 +1,35 @@
-import { IsAuthorizedGuard } from '@angular-challenges/module-to-standalone/admin/shared';
 import { Route } from '@angular/router';
+import { isAuthorizedGuard } from 'libs/module-to-standalone/admin/shared/src/lib/authorized.guard';
 
 export const appRoutes: Route[] = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   {
     path: 'home',
-    loadChildren: () =>
+    loadComponent: () =>
       import('@angular-challenges/module-to-standalone/home').then(
-        (m) => m.ModuleToStandaloneHomeModule,
+        (m) => m.HomeComponent,
       ),
   },
   {
     path: 'admin',
-    canActivate: [IsAuthorizedGuard],
+    canActivate: [isAuthorizedGuard],
     loadChildren: () =>
       import('@angular-challenges/module-to-standalone/admin/feature').then(
-        (m) => m.AdminFeatureModule,
+        (r) => r.ADMIN_ROUTES,
       ),
   },
   {
     path: 'user',
     loadChildren: () =>
       import('@angular-challenges/module-to-standalone/user/shell').then(
-        (m) => m.UserShellModule,
+        (m) => m.USER_ROUTES,
       ),
   },
-
   {
     path: 'forbidden',
-    loadChildren: () =>
+    loadComponent: () =>
       import('@angular-challenges/module-to-standalone/forbidden').then(
-        (m) => m.ForbiddenModule,
+        (m) => m.ForbiddenComponent,
       ),
   },
 ];
diff --git a/libs/module-to-standalone/user/contact/src/index.ts b/libs/module-to-standalone/user/contact/src/index.ts
index 8561ea519..fb955e5cb 100644
--- a/libs/module-to-standalone/user/contact/src/index.ts
+++ b/libs/module-to-standalone/user/contact/src/index.ts
@@ -1 +1 @@
-export * from './lib/contact-feature.module';
+export * from './lib/contact-feature.routes';
diff --git a/libs/module-to-standalone/user/contact/src/lib/contact-feature.module.ts b/libs/module-to-standalone/user/contact/src/lib/contact-feature.module.ts
deleted file mode 100644
index 09da407c7..000000000
--- a/libs/module-to-standalone/user/contact/src/lib/contact-feature.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-@NgModule({
-  declarations: [],
-  imports: [
-    CommonModule,
-    RouterModule.forChild([
-      {
-        path: '',
-        loadChildren: () =>
-          import('./dashboard/dashboard.component').then(
-            (m) => m.ContactDashboardModule,
-          ),
-      },
-      {
-        path: 'create-contact',
-        loadChildren: () =>
-          import('./create-contact/create-contact.component').then(
-            (m) => m.CreateContactModule,
-          ),
-      },
-    ]),
-  ],
-})
-export class ContactFeatureModule {}
diff --git a/libs/module-to-standalone/user/contact/src/lib/contact-feature.routes.ts b/libs/module-to-standalone/user/contact/src/lib/contact-feature.routes.ts
new file mode 100644
index 000000000..5a01eece7
--- /dev/null
+++ b/libs/module-to-standalone/user/contact/src/lib/contact-feature.routes.ts
@@ -0,0 +1,16 @@
+import { Route } from '@angular/router';
+import { CreateContactComponent } from './create-contact/create-contact.component';
+import { ContactDashboardComponent } from './dashboard/dashboard.component';
+
+export const contactFeatureRoutes: Route[] = [
+  {
+    path: '',
+    component: ContactDashboardComponent,
+    children: [
+      {
+        path: 'create-contact',
+        component: CreateContactComponent,
+      },
+    ],
+  },
+];
diff --git a/libs/module-to-standalone/user/contact/src/lib/create-contact/create-contact.component.ts b/libs/module-to-standalone/user/contact/src/lib/create-contact/create-contact.component.ts
index 5435fadc8..680514c52 100644
--- a/libs/module-to-standalone/user/contact/src/lib/create-contact/create-contact.component.ts
+++ b/libs/module-to-standalone/user/contact/src/lib/create-contact/create-contact.component.ts
@@ -1,8 +1,10 @@
-import { Component, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'lib-create-contact',
+  standalone: true,
+  imports: [RouterLink],
   template: `
     Create Contact Form
 
@@ -14,11 +16,3 @@ import { RouterModule } from '@angular/router';
   `,
 })
 export class CreateContactComponent {}
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([{ path: '', component: CreateContactComponent }]),
-  ],
-  declarations: [CreateContactComponent],
-})
-export class CreateContactModule {}
diff --git a/libs/module-to-standalone/user/contact/src/lib/dashboard/dashboard.component.ts b/libs/module-to-standalone/user/contact/src/lib/dashboard/dashboard.component.ts
index 3fde74dec..7fe73e465 100644
--- a/libs/module-to-standalone/user/contact/src/lib/dashboard/dashboard.component.ts
+++ b/libs/module-to-standalone/user/contact/src/lib/dashboard/dashboard.component.ts
@@ -1,8 +1,10 @@
-import { Component, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'lib-contact-dashboard',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink],
   template: `
     Contact Dashboard
 
@@ -11,14 +13,8 @@ import { RouterModule } from '@angular/router';
       class="ml-10 rounded-lg border bg-gray-700 p-2 text-white">
       Create contact
     </button>
+
+    <router-outlet />
   `,
 })
 export class ContactDashboardComponent {}
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([{ path: '', component: ContactDashboardComponent }]),
-  ],
-  declarations: [ContactDashboardComponent],
-})
-export class ContactDashboardModule {}
diff --git a/libs/module-to-standalone/user/home/src/index.ts b/libs/module-to-standalone/user/home/src/index.ts
index fe97ad579..e3b96c332 100644
--- a/libs/module-to-standalone/user/home/src/index.ts
+++ b/libs/module-to-standalone/user/home/src/index.ts
@@ -1 +1 @@
-export * from './lib/home.module';
+export { UserHomeComponent } from './lib/home.component';
diff --git a/libs/module-to-standalone/user/home/src/lib/home.component.ts b/libs/module-to-standalone/user/home/src/lib/home.component.ts
index d5472cb10..381ee648e 100644
--- a/libs/module-to-standalone/user/home/src/lib/home.component.ts
+++ b/libs/module-to-standalone/user/home/src/lib/home.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'lib-user-home',
+  standalone: true,
   template: `
     User Home component
   `,
diff --git a/libs/module-to-standalone/user/home/src/lib/home.module.ts b/libs/module-to-standalone/user/home/src/lib/home.module.ts
deleted file mode 100644
index ceeb49511..000000000
--- a/libs/module-to-standalone/user/home/src/lib/home.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { UserHomeComponent } from './home.component';
-
-@NgModule({
-  declarations: [UserHomeComponent],
-  imports: [
-    RouterModule.forChild([{ path: '', component: UserHomeComponent }]),
-  ],
-})
-export class UserHomeModule {}
diff --git a/libs/module-to-standalone/user/shell/src/index.ts b/libs/module-to-standalone/user/shell/src/index.ts
index 641fd6817..a32afc413 100644
--- a/libs/module-to-standalone/user/shell/src/index.ts
+++ b/libs/module-to-standalone/user/shell/src/index.ts
@@ -1 +1,2 @@
-export * from './lib/user-shell.module';
+export { UserShellComponent } from './lib/user-shell.component';
+export { userShellRoutes as USER_ROUTES } from './lib/user-shell.routes';
diff --git a/libs/module-to-standalone/user/shell/src/lib/user-shell.component.ts b/libs/module-to-standalone/user/shell/src/lib/user-shell.component.ts
index c9d8ba577..2884f0692 100644
--- a/libs/module-to-standalone/user/shell/src/lib/user-shell.component.ts
+++ b/libs/module-to-standalone/user/shell/src/lib/user-shell.component.ts
@@ -1,8 +1,11 @@
 import { TOKEN } from '@angular-challenges/module-to-standalone/core/providers';
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'lib-user-shell',
+  standalone: true,
+  imports: [RouterLink, RouterOutlet],
   template: `
     -- User Panel --
     <div class="flex items-center gap-2">
@@ -18,7 +21,7 @@ import { Component, Inject } from '@angular/core';
       </button>
       More buttons ...
     </div>
-    <router-outlet></router-outlet>
+    <router-outlet />
     <section>
       LoadedToken
       {{ token }}
@@ -29,5 +32,5 @@ import { Component, Inject } from '@angular/core';
   },
 })
 export class UserShellComponent {
-  constructor(@Inject(TOKEN) public token: string) {}
+  token = inject(TOKEN);
 }
diff --git a/libs/module-to-standalone/user/shell/src/lib/user-shell.module.ts b/libs/module-to-standalone/user/shell/src/lib/user-shell.module.ts
deleted file mode 100644
index 433d6f77b..000000000
--- a/libs/module-to-standalone/user/shell/src/lib/user-shell.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { provideToken } from '@angular-challenges/module-to-standalone/core/providers';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { UserShellComponent } from './user-shell.component';
-import { userShellRoutes } from './user-shell.routes';
-
-@NgModule({
-  imports: [CommonModule, RouterModule.forChild(userShellRoutes), RouterModule],
-  declarations: [UserShellComponent],
-  providers: [provideToken('user-token')],
-})
-export class UserShellModule {}
diff --git a/libs/module-to-standalone/user/shell/src/lib/user-shell.routes.ts b/libs/module-to-standalone/user/shell/src/lib/user-shell.routes.ts
index b5813e5d5..3d1c2a032 100644
--- a/libs/module-to-standalone/user/shell/src/lib/user-shell.routes.ts
+++ b/libs/module-to-standalone/user/shell/src/lib/user-shell.routes.ts
@@ -1,24 +1,26 @@
+import { provideToken } from '@angular-challenges/module-to-standalone/core/providers';
 import { Route } from '@angular/router';
-import { UserShellComponent } from './user-shell.component';
 
 export const userShellRoutes: Route[] = [
   {
     path: '',
-    component: UserShellComponent,
+    loadComponent: () =>
+      import('./user-shell.component').then((c) => c.UserShellComponent),
+    providers: [provideToken('user-token')],
     children: [
       { path: '', redirectTo: 'home', pathMatch: 'full' },
       {
         path: 'home',
-        loadChildren: () =>
+        loadComponent: () =>
           import('@angular-challenges/module-to-standalone/user/home').then(
-            (m) => m.UserHomeModule,
+            (m) => m.UserHomeComponent,
           ),
       },
       {
         path: 'contact',
         loadChildren: () =>
           import('@angular-challenges/module-to-standalone/user/contact').then(
-            (m) => m.ContactFeatureModule,
+            (m) => m.contactFeatureRoutes,
           ),
       },
     ],