feat(demo-app): migrate to angular standalone

projects/demo-app/web/ngx-auth/src/app/app.component.ts

@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html'
+    templateUrl: './app.component.html',
+    standalone: true,
+    imports: [RouterOutlet]
 })
 export class AppComponent { }

projects/demo-app/web/ngx-auth/src/app/app.config.ts

@@ -0,0 +1,12 @@
+import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter, withRouterConfig } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideHttpClient(),
+        provideRouter(routes, withRouterConfig({ onSameUrlNavigation: 'reload' }))
+    ]
+};

projects/demo-app/web/ngx-auth/src/app/app.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+
+import { routes as demoRoutes } from './demo/demo.routes';
+
+export const routes: Routes = [
+    { path: '', children: demoRoutes },
+    { path: '**', pathMatch: 'full', redirectTo: '' }
+];

projects/demo-app/web/ngx-auth/src/app/demo/components/page/page.component.ts

@@ -4,14 +4,15 @@ import { ActivatedRoute } from '@angular/router';
 @Component({
     selector: 'app-page',
     templateUrl: './page.component.html',
-    styleUrls: ['./page.component.scss']
+    styleUrls: ['./page.component.scss'],
+    standalone: true
 })
 export class PageComponent implements OnInit {
     public title = '';
 
     constructor(
         private route: ActivatedRoute
-    ) {}
+    ) { }
 
     public ngOnInit(): void {
         this.title = this.route.snapshot.data['title'] as string;

projects/demo-app/web/ngx-auth/src/app/demo/demo.component.ts

@@ -1,6 +1,8 @@
+import { AsyncPipe } from '@angular/common';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { AfterViewInit, Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Params, Router } from '@angular/router';
+import { AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Params, Router, RouterLink, RouterOutlet } from '@angular/router';
 import { AuthService } from '@badisi/ngx-auth';
 import { DemoAppPlaygroundElement, globalStyle } from 'demo-app-common';
 
@@ -9,6 +11,9 @@ import { DemoAppPlaygroundElement, globalStyle } from 'demo-app-common';
     templateUrl: './demo.component.html',
     styleUrls: ['./demo.component.scss'],
     styles: [globalStyle],
+    standalone: true,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    imports: [AsyncPipe, FormsModule, RouterOutlet, RouterLink],
     encapsulation: ViewEncapsulation.ShadowDom
 })
 export class DemoComponent implements AfterViewInit {

projects/demo-app/web/ngx-auth/src/app/demo/demo-routing.module.ts → projects/demo-app/web/ngx-auth/src/app/demo/demo.routes.ts

@@ -1,5 +1,4 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import { OIDCAuthSettings } from '@badisi/auth-js/oidc';
 import { AccessToken, AuthGuard, AuthGuardValidator, UserProfile } from '@badisi/ngx-auth';
 import { UserSettings } from 'demo-app-common';
@@ -29,22 +28,22 @@ const rolesValidator = (): AuthGuardValidator =>
     };
 /* eslint-enable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
 
-const routes: Routes = [
+export const routes: Routes = [
     {
         path: '',
         component: DemoComponent,
         children: [
             {
                 path: 'public',
-                loadChildren: () => import('./components/page/page.module').then(m => m.PageModule),
+                loadComponent: () => import('./components/page/page.component').then(m => m.PageComponent),
                 runGuardsAndResolvers: 'always',
                 data: {
                     title: 'PUBLIC CONTENT'
                 }
             },
             {
                 path: 'private',
-                loadChildren: () => import('./components/page/page.module').then(m => m.PageModule),
+                loadComponent: () => import('./components/page/page.component').then(m => m.PageComponent),
                 runGuardsAndResolvers: 'always',
                 canLoad: [AuthGuard],
                 canActivate: [AuthGuard],
@@ -55,15 +54,15 @@ const routes: Routes = [
             },
             {
                 path: 'forbidden',
-                loadChildren: () => import('./components/page/page.module').then(m => m.PageModule),
+                loadComponent: () => import('./components/page/page.component').then(m => m.PageComponent),
                 runGuardsAndResolvers: 'always',
                 data: {
                     title: 'ACCESS FORBIDDEN'
                 }
             },
             {
                 path: 'protected',
-                loadChildren: () => import('./components/page/page.module').then(m => m.PageModule),
+                loadComponent: () => import('./components/page/page.component').then(m => m.PageComponent),
                 runGuardsAndResolvers: 'always',
                 canLoad: [AuthGuard],
                 canActivate: [AuthGuard],
@@ -76,9 +75,3 @@ const routes: Routes = [
         ]
     }
 ];
-
-@NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule]
-})
-export class DemoRoutingModule { }

projects/demo-app/web/ngx-auth/src/main.ts

@@ -1,8 +1,9 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { initAuth } from '@badisi/ngx-auth';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { initAuth, provideAuth } from '@badisi/ngx-auth';
 import { DemoAppSettings } from 'demo-app-common';
 
-import { AppModule } from './app/app.module';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 import { appSettings } from './app/app.settings';
 
 declare global {
@@ -24,9 +25,9 @@ declare global {
         .then(authProvider => {
             el.replaceWith(document.createElement('app-root'));
 
-            platformBrowserDynamic([
-                authProvider
-            ]).bootstrapModule(AppModule).catch(err => console.error(err));
+            appConfig.providers.push(provideAuth(authProvider));
+            bootstrapApplication(AppComponent, appConfig)
+                .catch(err => console.error(err));
         })
         .catch((err: Error) => {
             const message = (err instanceof Error) ? err.message : err;