refactor(components): refactor to standalone components

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

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

apps/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));

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

@@ -1 +1 @@
-export * from './lib/admin-feature.module';
+export { default } from './lib/admin-feature.route';

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

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

libs/module-to-standalone/admin/feature/src/lib/create-user/create-user.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-user',
+ standalone: true,
+ imports: [RouterLink],
  template: `Create User Form
 
  <button
@@ -11,12 +13,4 @@ import { RouterModule } from '@angular/router';
  Back
  </button> `,
 })
-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,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-dashboard',
+ standalone: true,
+ imports: [RouterLink],
  template: `Dashboard
 
  <button
@@ -11,12 +13,4 @@ import { RouterModule } from '@angular/router';
  Create User
  </button> `,
 })
-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/index.ts

@@ -1 +1 @@
-export * from './lib/authorized.guard';
+export { IsAuthorizedGuard } from './lib/authorized.guard';

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

@@ -1,23 +1,9 @@
-import { CanActivate, Router, UrlTree } from '@angular/router';
+import { CanMatchFn } from '@angular/router';
 
 import { AuthorizationService } from '@angular-challenges/module-to-standalone/core/service';
-import { Injectable } from '@angular/core';
-import { Observable, map } from 'rxjs';
 
-@Injectable({
- providedIn: 'root',
-})
-export class IsAuthorizedGuard implements CanActivate {
- constructor(
- private authorizationService: AuthorizationService,
- private router: Router
- ) {}
+import { inject } from '@angular/core';
 
- canActivate(): Observable<boolean | UrlTree> {
- return this.authorizationService.isAuthorized$.pipe(
- map((isAuthorized) =>
- isAuthorized ? true : this.router.createUrlTree(['forbidden'])
- )
- );
- }
-}
+export const IsAuthorizedGuard: CanMatchFn = () => {
+ return inject(AuthorizationService).isAuthorized$;
+};

libs/module-to-standalone/core/providers/src/index.ts

@@ -1 +1 @@
-export * from './lib/token.provider';
+export { TOKEN, provideToken } from './lib/token.provider';

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/core/service/src/index.ts

@@ -1 +1 @@
-export * from './lib/authorization.service';
+export { AuthorizationService } from './lib/authorization.service';

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

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
  selector: 'lib-home',
+ standalone: true,
  template: `Forbidden component`,
 })
-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,9 +1,12 @@
 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 { Component, inject } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
  selector: 'lib-home',
+ standalone: true,
+ imports: [AsyncPipe],
  template: `Home component
 
  <section class="flex gap-5 items-center">
@@ -19,9 +22,7 @@ import { Component, Inject } from '@angular/core';
 
  <section>LoadedToken {{ token }}</section> `,
 })
-export class HomeComponent {
- constructor(
- public authorizeService: AuthorizationService,
- @Inject(TOKEN) public token: string
- ) {}
+export default class HomeComponent {
+ authorizeService = inject(AuthorizationService);
+ token = inject(TOKEN);
 }

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

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

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

@@ -5,32 +5,23 @@ export const appRoutes: Route[] = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
  path: 'home',
- loadChildren: () =>
- import('@angular-challenges/module-to-standalone/home').then(
- (m) => m.ModuleToStandaloneHomeModule
- ),
+ 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
- ),
+ import('@angular-challenges/module-to-standalone/admin/feature'),
  },
  {
- path: 'user',
- loadChildren: () =>
- import('@angular-challenges/module-to-standalone/user/shell').then(
- (m) => m.UserShellModule
- ),
+ path: 'admin',
+ loadComponent: () =>
+ import('@angular-challenges/module-to-standalone/forbidden'),
  },
-
  {
- path: 'forbidden',
+ path: 'user',
  loadChildren: () =>
- import('@angular-challenges/module-to-standalone/forbidden').then(
- (m) => m.ForbiddenModule
- ),
+ import('@angular-challenges/module-to-standalone/user/shell'),
  },
 ];

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

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

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

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

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
 
  <button
@@ -11,12 +13,4 @@ import { RouterModule } from '@angular/router';
  Back
  </button> `,
 })
-export class CreateContactComponent {}
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '', component: CreateContactComponent }]),
- ],
- declarations: [CreateContactComponent],
-})
-export class CreateContactModule {}
+export default class CreateContactComponent {}