Answer: 31 Completed migration from modules to standalone

apps/angular/31-module-to-standalone/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -26,6 +27,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     class: 'flex flex-col p-4 gap-3',
   },
   changeDetection: ChangeDetectionStrategy.Eager,
-  standalone: false,
+  imports: [RouterLink, RouterOutlet],
 })
 export class AppComponent {}

apps/angular/31-module-to-standalone/src/main.ts

@@ -1,9 +1,10 @@
-import { provideZoneChangeDetection } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import { importProvidersFrom } from '@angular/core';
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule, {
-    applicationProviders: [provideZoneChangeDetection()],
-  })
-  .catch((err) => console.error(err));
+import appRoutes from '@angular-challenges/module-to-standalone/shell';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, {
+  providers: [importProvidersFrom(BrowserModule), provideRouter(appRoutes)],
+}).catch((err) => console.error(err));

libs/module-to-standalone/admin/feature/src/index.ts

@@ -1 +1,3 @@
-export * from './lib/admin-feature.module';
+import { adminFeatureRoutes } from './lib/admin-feature.routes';
+
+export default adminFeatureRoutes;

libs/module-to-standalone/admin/feature/src/lib/admin-feature.routes.ts

@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router';
+
+export const adminFeatureRoutes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./dashboard/dashboard.component'),
+  },
+  {
+    path: 'create-user',
+    loadComponent: () => import('./create-user/create-user.component'),
+  },
+];

libs/module-to-standalone/admin/feature/src/lib/create-user/create-user.component.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'lib-create-user',
@@ -12,15 +12,7 @@ import { RouterModule } from '@angular/router';
       Back
     </button>
   `,
-  changeDetection: ChangeDetectionStrategy.Eager,
-  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink],
 })
-export class CreateUserComponent {}
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([{ path: '', component: CreateUserComponent }]),
-  ],
-  declarations: [CreateUserComponent],
-})
-export class CreateUserModule {}
+export default class CreateUserComponent {}

libs/module-to-standalone/admin/feature/src/lib/dashboard/dashboard.component.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'lib-dashboard',
@@ -12,15 +12,7 @@ import { RouterModule } from '@angular/router';
       Create User
     </button>
   `,
-  changeDetection: ChangeDetectionStrategy.Eager,
-  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink],
 })
-export class DashboardComponent {}
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([{ path: '', component: DashboardComponent }]),
-  ],
-  declarations: [DashboardComponent],
-})
-export class DashboardModule {}
+export default class DashboardComponent {}

libs/module-to-standalone/forbidden/src/index.ts

@@ -1 +1,3 @@
-export * from './lib/forbidden.module';
+import { ForbiddenComponent } from './lib/forbidden.component';
+
+export default ForbiddenComponent;

libs/module-to-standalone/forbidden/src/lib/forbidden.component.ts

@@ -5,7 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   template: `
     Forbidden component
   `,
-  changeDetection: ChangeDetectionStrategy.Eager,
-  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ForbiddenComponent {}

libs/module-to-standalone/home/src/index.ts

@@ -1 +1,3 @@
-export * from './lib/home.module';
+import { HomeComponent } from './lib/home.component';
+
+export default HomeComponent;

libs/module-to-standalone/home/src/lib/home.component.ts

@@ -1,5 +1,6 @@
 import { TOKEN } from '@angular-challenges/module-to-standalone/core/providers';
 import { AuthorizationService } from '@angular-challenges/module-to-standalone/core/service';
+import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
 @Component({
@@ -20,8 +21,8 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
     <section>LoadedToken {{ token }}</section>
   `,
-  changeDetection: ChangeDetectionStrategy.Eager,
-  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AsyncPipe],
 })
 export class HomeComponent {
   public authorizeService = inject(AuthorizationService);

libs/module-to-standalone/shell/src/index.ts

@@ -1 +1,3 @@
-export * from './lib/main-shell.module';
+import { appRoutes } from './lib/main-shell.routes';
+
+export default appRoutes;

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 { provideToken } from '@angular-challenges/module-to-standalone/core/providers';
 import { Route } from '@angular/router';
 
 export const appRoutes: Route[] = [
-  { path: '', redirectTo: 'home', pathMatch: 'full' },
   {
-    path: 'home',
-    loadChildren: () =>
-      import('@angular-challenges/module-to-standalone/home').then(
-        (m) => m.ModuleToStandaloneHomeModule,
-      ),
-  },
-  {
-    path: 'admin',
-    canActivate: [IsAuthorizedGuard],
-    loadChildren: () =>
-      import('@angular-challenges/module-to-standalone/admin/feature').then(
-        (m) => m.AdminFeatureModule,
-      ),
-  },
-  {
-    path: 'user',
-    loadChildren: () =>
-      import('@angular-challenges/module-to-standalone/user/shell').then(
-        (m) => m.UserShellModule,
-      ),
-  },
+    path: '',
+    providers: [provideToken('main-shell-token')],
+    children: [
+      { path: '', redirectTo: 'home', pathMatch: 'full' },
+      {
+        path: 'home',
+        loadComponent: () =>
+          import('@angular-challenges/module-to-standalone/home'),
+      },
+      {
+        path: 'admin',
+        canActivate: [IsAuthorizedGuard],
+        loadChildren: () =>
+          import('@angular-challenges/module-to-standalone/admin/feature'),
+      },
+      {
+        path: 'user',
+        loadChildren: () =>
+          import('@angular-challenges/module-to-standalone/user/shell'),
+      },
 
-  {
-    path: 'forbidden',
-    loadChildren: () =>
-      import('@angular-challenges/module-to-standalone/forbidden').then(
-        (m) => m.ForbiddenModule,
-      ),
+      {
+        path: 'forbidden',
+        loadComponent: () =>
+          import('@angular-challenges/module-to-standalone/forbidden'),
+      },
+    ],
   },
 ];

libs/module-to-standalone/user/contact/src/index.ts

@@ -1 +1,3 @@
-export * from './lib/contact-feature.module';
+import { contactFeatureRoutes } from './lib/contact-feature.routes';
+
+export default contactFeatureRoutes;

libs/module-to-standalone/user/contact/src/lib/contact-feature.routes.ts

@@ -0,0 +1,12 @@
+import { Route } from '@angular/router';
+
+export const contactFeatureRoutes: Route[] = [
+  {
+    path: '',
+    loadComponent: () => import('./dashboard/dashboard.component'),
+  },
+  {
+    path: 'create-contact',
+    loadComponent: () => import('./create-contact/create-contact.component'),
+  },
+];

libs/module-to-standalone/user/contact/src/lib/create-contact/create-contact.component.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'lib-create-contact',
@@ -12,15 +12,7 @@ import { RouterModule } from '@angular/router';
       Back
     </button>
   `,
-  changeDetection: ChangeDetectionStrategy.Eager,
-  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink],
 })
-export class CreateContactComponent {}
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([{ path: '', component: CreateContactComponent }]),
-  ],
-  declarations: [CreateContactComponent],
-})
-export class CreateContactModule {}
+export default class CreateContactComponent {}

libs/module-to-standalone/user/contact/src/lib/dashboard/dashboard.component.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'lib-contact-dashboard',
@@ -12,15 +12,7 @@ import { RouterModule } from '@angular/router';
       Create contact
     </button>
   `,
-  changeDetection: ChangeDetectionStrategy.Eager,
-  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink],
 })
-export class ContactDashboardComponent {}
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([{ path: '', component: ContactDashboardComponent }]),
-  ],
-  declarations: [ContactDashboardComponent],
-})
-export class ContactDashboardModule {}
+export default class ContactDashboardComponent {}

libs/module-to-standalone/user/home/src/index.ts

@@ -1 +1,3 @@
-export * from './lib/home.module';
+import { UserHomeComponent } from './lib/home.component';
+
+export default UserHomeComponent;