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 986df84b5..6656eedb6 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,9 @@ import { Component } from '@angular/core'; +import { RouterLink, RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', + imports: [RouterLink, RouterOutlet], template: `
`, - standalone: false, -}) -export class CreateUserComponent {} - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '', component: CreateUserComponent }]), - ], - declarations: [CreateUserComponent], }) -export class CreateUserModule {} +export default class CreateUserComponent {} 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 801efb520..39521be67 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,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 - `, - standalone: false, -}) -export class DashboardComponent {} - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '', component: DashboardComponent }]), - ], - declarations: [DashboardComponent], }) -export class DashboardModule {} +export default class DashboardComponent {} 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..276108e27 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,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 { - 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/core/providers/src/lib/token.provider.ts b/libs/module-to-standalone/core/providers/src/lib/token.provider.ts index 3f498ee06..132f3fde6 100644 --- a/libs/module-to-standalone/core/providers/src/lib/token.provider.ts +++ b/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('token'); +export const TOKEN = new InjectionToken('token'); export const provideToken = (token: string): EnvironmentProviders => { return makeEnvironmentProviders([ diff --git a/libs/module-to-standalone/forbidden/src/index.ts b/libs/module-to-standalone/forbidden/src/index.ts index 672622f64..dd4219cc6 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 { default } 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 a5e6e2d77..6f474ee74 100644 --- a/libs/module-to-standalone/forbidden/src/lib/forbidden.component.ts +++ b/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 {} 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..5055b06fe 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 { default } 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 f4b5c2db0..ee774e8ed 100644 --- a/libs/module-to-standalone/home/src/lib/home.component.ts +++ b/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 -
Authorization : `, - standalone: false, -}) -export class CreateContactComponent {} - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '', component: CreateContactComponent }]), - ], - declarations: [CreateContactComponent], }) -export class CreateContactModule {} +export default class CreateContactComponent {} 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 8e56b721a..907193fd9 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,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-contact-dashboard', + imports: [RouterLink], template: ` Contact Dashboard - `, - standalone: false, -}) -export class ContactDashboardComponent {} - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '', component: ContactDashboardComponent }]), - ], - declarations: [ContactDashboardComponent], }) -export class ContactDashboardModule {} +export default class ContactDashboardComponent {} diff --git a/libs/module-to-standalone/user/home/src/index.ts b/libs/module-to-standalone/user/home/src/index.ts index fe97ad579..5055b06fe 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 { default } 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 253c76622..e167aaa9f 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 @@ -1,10 +1,8 @@ import { Component } from '@angular/core'; - @Component({ selector: 'lib-user-home', template: ` User Home component `, - standalone: false, }) -export class UserHomeComponent {} +export default class UserHomeComponent {} 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..bcebb64da 100644 --- a/libs/module-to-standalone/user/shell/src/index.ts +++ b/libs/module-to-standalone/user/shell/src/index.ts @@ -1 +1 @@ -export * from './lib/user-shell.module'; +export * 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 f8d162756..79f086292 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,10 @@ 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', + imports: [RouterLink, RouterOutlet], template: ` -- User Panel --
@@ -27,8 +29,7 @@ import { Component, Inject } from '@angular/core'; host: { class: 'flex flex-col p-4 gap-3 border border-blue', }, - standalone: false, }) export class UserShellComponent { - constructor(@Inject(TOKEN) public token: string) {} + readonly 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..86e984253 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,24 @@ +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: '', + providers: [provideToken('user-token')], component: UserShellComponent, children: [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', - loadChildren: () => - import('@angular-challenges/module-to-standalone/user/home').then( - (m) => m.UserHomeModule, - ), + loadComponent: () => + import('@angular-challenges/module-to-standalone/user/home'), }, { path: 'contact', loadChildren: () => import('@angular-challenges/module-to-standalone/user/contact').then( - (m) => m.ContactFeatureModule, + (r) => r.contactFeatureRoutes, ), }, ],