Answer:31

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

@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
+  imports: [RouterLink, RouterOutlet],
   template: `
     <div class="flex gap-2">
       <button
@@ -25,6 +27,5 @@ import { Component } from '@angular/core';
   host: {
     class: 'flex flex-col p-4 gap-3',
   },
-  standalone: false,
 })
 export class AppComponent {}

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

@@ -0,0 +1,7 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)],
+};

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

@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () =>
+      import('@angular-challenges/module-to-standalone/shell').then(
+        (r) => r.appRoutes,
+      ),
+  },
+  { path: '**', redirectTo: '' },
+];

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

@@ -1,6 +1,7 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);

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

@@ -1 +1 @@
-export * from './lib/admin-feature.module';
+export * from './lib/admin-feature.routes';

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,25 +1,16 @@
-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',
+  imports: [RouterLink],
   template: `
     Create User Form
-
     <button
       routerLink=".."
       class="ml-5 rounded-lg border bg-gray-700 p-2 text-white">
       Back
     </button>
   `,
-  standalone: false,
-})
-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,25 +1,16 @@
-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',
+  imports: [RouterLink],
   template: `
     Dashboard
-
     <button
       routerLink="create-user"
       class="ml-10 rounded-lg border bg-gray-700 p-2 text-white">
       Create User
     </button>
   `,
-  standalone: false,
-})
-export class DashboardComponent {}
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([{ path: '', component: DashboardComponent }]),
-  ],
-  declarations: [DashboardComponent],
 })
-export class DashboardModule {}
+export default class DashboardComponent {}

libs/module-to-standalone/admin/shared/src/lib/authorized.guard.ts

@@ -1,23 +1,16 @@
-import { CanActivate, Router, UrlTree } from '@angular/router';
+import { CanMatchFn, Router } from '@angular/router';
 
 import { AuthorizationService } from '@angular-challenges/module-to-standalone/core/service';
-import { Injectable } from '@angular/core';
-import { Observable, map } from 'rxjs';
+import { inject } from '@angular/core';
+import { map } from 'rxjs';
 
-@Injectable({
-  providedIn: 'root',
-})
-export class IsAuthorizedGuard implements CanActivate {
-  constructor(
-    private authorizationService: AuthorizationService,
-    private router: Router,
-  ) {}
+export const IsAuthorizedGuard: CanMatchFn = () => {
+  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']),
+    ),
+  );
+};

libs/module-to-standalone/core/providers/src/lib/token.provider.ts

@@ -4,7 +4,7 @@ import {
   makeEnvironmentProviders,
 } from '@angular/core';
 
-export const TOKEN = new InjectionToken<string[]>('token');
+export const TOKEN = new InjectionToken<string>('token');
 
 export const provideToken = (token: string): EnvironmentProviders => {
   return makeEnvironmentProviders([

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

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

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

@@ -5,6 +5,5 @@ import { Component } from '@angular/core';
   template: `
     Forbidden component
   `,
-  standalone: false,
 })
-export class ForbiddenComponent {}
+export default class ForbiddenComponent {}

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

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

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

@@ -1,12 +1,13 @@
 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',
+  imports: [AsyncPipe],
   template: `
     Home component
-
     <section class="flex items-center gap-5">
       Authorization :
       <button class="border p-2  " (click)="authorizeService.authorize()">
@@ -20,11 +21,8 @@ import { Component, Inject } from '@angular/core';
 
     <section>LoadedToken {{ token }}</section>
   `,
-  standalone: false,
 })
-export class HomeComponent {
-  constructor(
-    public authorizeService: AuthorizationService,
-    @Inject(TOKEN) public token: string,
-  ) {}
+export default class HomeComponent {
+  readonly authorizeService = inject(AuthorizationService);
+  readonly token = inject(TOKEN);
 }

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

@@ -1 +1 @@
-export * from './lib/main-shell.module';
+export * from './lib/main-shell.routes';

libs/module-to-standalone/shell/src/lib/main-shell.routes.ts

@@ -1,36 +1,34 @@
 import { IsAuthorizedGuard } from '@angular-challenges/module-to-standalone/admin/shared';
-import { Route } from '@angular/router';
+import { provideToken } from '@angular-challenges/module-to-standalone/core/providers';
+import { Routes } from '@angular/router';
 
-export const appRoutes: Route[] = [
-  { path: '', redirectTo: 'home', pathMatch: 'full' },
+export const appRoutes: Routes = [
+  { path: '', pathMatch: 'full', redirectTo: 'home' },
   {
     path: 'home',
-    loadChildren: () =>
-      import('@angular-challenges/module-to-standalone/home').then(
-        (m) => m.ModuleToStandaloneHomeModule,
-      ),
+    providers: [provideToken('main-shell-token')],
+    loadComponent: () =>
+      import('@angular-challenges/module-to-standalone/home'),
   },
   {
     path: 'admin',
-    canActivate: [IsAuthorizedGuard],
+    canMatch: [IsAuthorizedGuard],
     loadChildren: () =>
       import('@angular-challenges/module-to-standalone/admin/feature').then(
-        (m) => m.AdminFeatureModule,
+        (r) => r.adminFeatureRoutes,
       ),
   },
   {
     path: 'user',
     loadChildren: () =>
       import('@angular-challenges/module-to-standalone/user/shell').then(
-        (m) => m.UserShellModule,
+        (r) => r.userShellRoutes,
       ),
   },
 
   {
     path: 'forbidden',
-    loadChildren: () =>
-      import('@angular-challenges/module-to-standalone/forbidden').then(
-        (m) => m.ForbiddenModule,
-      ),
+    loadComponent: () =>
+      import('@angular-challenges/module-to-standalone/forbidden'),
   },
 ];

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

@@ -1 +1 @@
-export * from './lib/contact-feature.module';
+export * from './lib/contact-feature.routes';

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

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