From 5fbb3ba721e8fe0ea1e9afebb2dd7090aa4b332d Mon Sep 17 00:00:00 2001 From: Badisi Date: Tue, 16 Apr 2024 17:04:41 +0200 Subject: [PATCH] feat(demo-app): migrate to angular standalone --- .../ngx-auth/src/app/app-routing.module.ts | 12 --------- .../web/ngx-auth/src/app/app.component.ts | 5 +++- .../web/ngx-auth/src/app/app.config.ts | 12 +++++++++ .../web/ngx-auth/src/app/app.module.ts | 25 ----------------- .../web/ngx-auth/src/app/app.routes.ts | 8 ++++++ .../components/page/page-routing.module.ts | 14 ---------- .../demo/components/page/page.component.ts | 5 ++-- .../app/demo/components/page/page.module.ts | 14 ---------- .../ngx-auth/src/app/demo/demo.component.ts | 9 +++++-- .../web/ngx-auth/src/app/demo/demo.module.ts | 27 ------------------- ...{demo-routing.module.ts => demo.routes.ts} | 19 +++++-------- projects/demo-app/web/ngx-auth/src/main.ts | 13 ++++----- 12 files changed, 47 insertions(+), 116 deletions(-) delete mode 100644 projects/demo-app/web/ngx-auth/src/app/app-routing.module.ts create mode 100644 projects/demo-app/web/ngx-auth/src/app/app.config.ts delete mode 100644 projects/demo-app/web/ngx-auth/src/app/app.module.ts create mode 100644 projects/demo-app/web/ngx-auth/src/app/app.routes.ts delete mode 100644 projects/demo-app/web/ngx-auth/src/app/demo/components/page/page-routing.module.ts delete mode 100644 projects/demo-app/web/ngx-auth/src/app/demo/components/page/page.module.ts delete mode 100644 projects/demo-app/web/ngx-auth/src/app/demo/demo.module.ts rename projects/demo-app/web/ngx-auth/src/app/demo/{demo-routing.module.ts => demo.routes.ts} (78%) diff --git a/projects/demo-app/web/ngx-auth/src/app/app-routing.module.ts b/projects/demo-app/web/ngx-auth/src/app/app-routing.module.ts deleted file mode 100644 index 0625324..0000000 --- a/projects/demo-app/web/ngx-auth/src/app/app-routing.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -const routes: Routes = [ - { path: '**', pathMatch: 'full', redirectTo: '' } -]; - -@NgModule({ - imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', enableTracing: false })], - exports: [RouterModule] -}) -export class AppRoutingModule {} diff --git a/projects/demo-app/web/ngx-auth/src/app/app.component.ts b/projects/demo-app/web/ngx-auth/src/app/app.component.ts index 3aac2e3..f588002 100644 --- a/projects/demo-app/web/ngx-auth/src/app/app.component.ts +++ b/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 { } diff --git a/projects/demo-app/web/ngx-auth/src/app/app.config.ts b/projects/demo-app/web/ngx-auth/src/app/app.config.ts new file mode 100644 index 0000000..dd495d3 --- /dev/null +++ b/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' })) + ] +}; diff --git a/projects/demo-app/web/ngx-auth/src/app/app.module.ts b/projects/demo-app/web/ngx-auth/src/app/app.module.ts deleted file mode 100644 index b9f5696..0000000 --- a/projects/demo-app/web/ngx-auth/src/app/app.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { AuthModule } from '@badisi/ngx-auth'; - -import { AppComponent } from './app.component'; -import { AppRoutingModule as zAppRoutingModule } from './app-routing.module'; -import { DemoModule } from './demo/demo.module'; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - AuthModule, - BrowserModule, - CommonModule, - DemoModule, - zAppRoutingModule // should be imported last - ], - bootstrap: [ - AppComponent - ] -}) -export class AppModule { } diff --git a/projects/demo-app/web/ngx-auth/src/app/app.routes.ts b/projects/demo-app/web/ngx-auth/src/app/app.routes.ts new file mode 100644 index 0000000..a238cb8 --- /dev/null +++ b/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: '' } +]; diff --git a/projects/demo-app/web/ngx-auth/src/app/demo/components/page/page-routing.module.ts b/projects/demo-app/web/ngx-auth/src/app/demo/components/page/page-routing.module.ts deleted file mode 100644 index 02f2857..0000000 --- a/projects/demo-app/web/ngx-auth/src/app/demo/components/page/page-routing.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { PageComponent } from './page.component'; - -const routes: Routes = [ - { path: '', component: PageComponent } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class PageRoutingModule { } diff --git a/projects/demo-app/web/ngx-auth/src/app/demo/components/page/page.component.ts b/projects/demo-app/web/ngx-auth/src/app/demo/components/page/page.component.ts index 2b7e3ef..1eb12e0 100644 --- a/projects/demo-app/web/ngx-auth/src/app/demo/components/page/page.component.ts +++ b/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; diff --git a/projects/demo-app/web/ngx-auth/src/app/demo/components/page/page.module.ts b/projects/demo-app/web/ngx-auth/src/app/demo/components/page/page.module.ts deleted file mode 100644 index 6bef52e..0000000 --- a/projects/demo-app/web/ngx-auth/src/app/demo/components/page/page.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { PageComponent } from './page.component'; -import { PageRoutingModule } from './page-routing.module'; - -@NgModule({ - declarations: [ - PageComponent - ], - imports: [ - PageRoutingModule - ] -}) -export class PageModule { } diff --git a/projects/demo-app/web/ngx-auth/src/app/demo/demo.component.ts b/projects/demo-app/web/ngx-auth/src/app/demo/demo.component.ts index 050aaeb..c1e2baa 100644 --- a/projects/demo-app/web/ngx-auth/src/app/demo/demo.component.ts +++ b/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 { diff --git a/projects/demo-app/web/ngx-auth/src/app/demo/demo.module.ts b/projects/demo-app/web/ngx-auth/src/app/demo/demo.module.ts deleted file mode 100644 index e509556..0000000 --- a/projects/demo-app/web/ngx-auth/src/app/demo/demo.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -import 'demo-app-common'; - -import { CommonModule } from '@angular/common'; -import { HttpClientModule } from '@angular/common/http'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; - -import { PageModule } from './components/page/page.module'; -import { DemoComponent } from './demo.component'; -import { DemoRoutingModule } from './demo-routing.module'; - -@NgModule({ - declarations: [ - DemoComponent - ], - imports: [ - CommonModule, - DemoRoutingModule, - FormsModule, - HttpClientModule, - PageModule - ], - schemas: [ - CUSTOM_ELEMENTS_SCHEMA - ] -}) -export class DemoModule { } diff --git a/projects/demo-app/web/ngx-auth/src/app/demo/demo-routing.module.ts b/projects/demo-app/web/ngx-auth/src/app/demo/demo.routes.ts similarity index 78% rename from projects/demo-app/web/ngx-auth/src/app/demo/demo-routing.module.ts rename to projects/demo-app/web/ngx-auth/src/app/demo/demo.routes.ts index 8f51aff..39720ac 100644 --- a/projects/demo-app/web/ngx-auth/src/app/demo/demo-routing.module.ts +++ b/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,14 +28,14 @@ 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' @@ -44,7 +43,7 @@ const routes: Routes = [ }, { 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,7 +54,7 @@ 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' @@ -63,7 +62,7 @@ const routes: Routes = [ }, { 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 { } diff --git a/projects/demo-app/web/ngx-auth/src/main.ts b/projects/demo-app/web/ngx-auth/src/main.ts index cb423f4..352ee12 100644 --- a/projects/demo-app/web/ngx-auth/src/main.ts +++ b/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;