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 db801daf1..04a929fb5 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,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 {} 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 8cd87d53b..dc733de07 100644 --- a/apps/angular/31-module-to-standalone/src/main.ts +++ b/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)); diff --git a/libs/module-to-standalone/admin/feature/src/index.ts b/libs/module-to-standalone/admin/feature/src/index.ts index 76c8330f9..130c1eba6 100644 --- a/libs/module-to-standalone/admin/feature/src/index.ts +++ b/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; 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..ecf093c5d --- /dev/null +++ b/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'), + }, +]; 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 ccd2a8ec9..4ad173a68 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,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 `, - 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 {} 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 ce0ca38fa..bf28fb2b2 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,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 `, - 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 {} diff --git a/libs/module-to-standalone/forbidden/src/index.ts b/libs/module-to-standalone/forbidden/src/index.ts index 672622f64..0fcf1884a 100644 --- a/libs/module-to-standalone/forbidden/src/index.ts +++ b/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; 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 456e9d5ba..c5025bed3 100644 --- a/libs/module-to-standalone/forbidden/src/lib/forbidden.component.ts +++ b/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 {} 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..30abd271a 100644 --- a/libs/module-to-standalone/home/src/index.ts +++ b/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; 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 79276c92d..1fc509468 100644 --- a/libs/module-to-standalone/home/src/lib/home.component.ts +++ b/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';
LoadedToken {{ token }}
`, - changeDetection: ChangeDetectionStrategy.Eager, - standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [AsyncPipe], }) export class HomeComponent { public authorizeService = inject(AuthorizationService); 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..7f9401950 100644 --- a/libs/module-to-standalone/shell/src/index.ts +++ b/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; 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..585c95fb8 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 { 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'), + }, + ], }, ]; diff --git a/libs/module-to-standalone/user/contact/src/index.ts b/libs/module-to-standalone/user/contact/src/index.ts index 8561ea519..c94b5442f 100644 --- a/libs/module-to-standalone/user/contact/src/index.ts +++ b/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; 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..576202c92 --- /dev/null +++ b/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'), + }, +]; 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 85dc49290..c064ed4fa 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,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 `, - 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 {} 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 b6ef36ee0..f70b4397b 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,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 `, - 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 {} diff --git a/libs/module-to-standalone/user/home/src/index.ts b/libs/module-to-standalone/user/home/src/index.ts index fe97ad579..dfe57f379 100644 --- a/libs/module-to-standalone/user/home/src/index.ts +++ b/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; 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 266cb93bc..534e64c46 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 @@ -5,7 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; template: ` User Home component `, - changeDetection: ChangeDetectionStrategy.Eager, - standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, }) export 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..54f820697 100644 --- a/libs/module-to-standalone/user/shell/src/index.ts +++ b/libs/module-to-standalone/user/shell/src/index.ts @@ -1 +1,3 @@ -export * from './lib/user-shell.module'; +import { userShellRoutes } from './lib/user-shell.routes'; + +export default userShellRoutes; 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 ed4799483..41bde5aa4 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,5 +1,6 @@ import { TOKEN } from '@angular-challenges/module-to-standalone/core/providers'; import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { RouterLink, RouterOutlet } from '@angular/router'; @Component({ selector: 'lib-user-shell', @@ -27,8 +28,9 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; host: { class: 'flex flex-col p-4 gap-3 border border-blue', }, - changeDetection: ChangeDetectionStrategy.Eager, - standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [RouterLink, RouterOutlet], }) export class UserShellComponent { public 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..3846c7857 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,3 +1,4 @@ +import { provideToken } from '@angular-challenges/module-to-standalone/core/providers'; import { Route } from '@angular/router'; import { UserShellComponent } from './user-shell.component'; @@ -5,21 +6,18 @@ export const userShellRoutes: Route[] = [ { path: '', component: UserShellComponent, + providers: [provideToken('user-token')], 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, - ), + import('@angular-challenges/module-to-standalone/user/contact'), }, ], },