From 987c25403713975015ae961ff5a1307767ec018a Mon Sep 17 00:00:00 2001 From: ccremer Date: Tue, 23 May 2023 16:45:57 +0200 Subject: [PATCH] Migrate to Angular standalone components --- .../kubernetes-client-angular/README.md | 41 +++++++--------- .../kubernetes-client-angular/README.md.njk | 4 +- .../examples/app.component.ts | 1 + .../examples/{app.module.ts => main.ts} | 38 +++++++------- .../src/app/app.component.ts | 4 +- .../src/app/app.module.ts | 49 ------------------- .../src/app/client/client.component.ts | 4 +- .../src/app/login/login.component.ts | 4 ++ .../src/app/login/login.module.ts | 11 ----- .../src/main.ts | 46 ++++++++++++++--- 10 files changed, 88 insertions(+), 114 deletions(-) rename packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/{app.module.ts => main.ts} (58%) delete mode 100644 packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/app.module.ts delete mode 100644 packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/login/login.module.ts diff --git a/packages/kubernetes-client-angular/projects/kubernetes-client-angular/README.md b/packages/kubernetes-client-angular/projects/kubernetes-client-angular/README.md index 821a988..1c1612f 100644 --- a/packages/kubernetes-client-angular/projects/kubernetes-client-angular/README.md +++ b/packages/kubernetes-client-angular/projects/kubernetes-client-angular/README.md @@ -35,35 +35,33 @@ Install the dependencies npm install @ccremer/kubernetes-client @ccremer/kubernetes-client-angular ``` -Setup the module with `@ngrx/data` in `app.module.ts`: +Setup the module with `@ngrx/data` in `main.ts`: ```typescript -import { NgModule } from '@angular/core' -import { BrowserModule } from '@angular/platform-browser' - +import { bootstrapApplication, BrowserModule } from '@angular/platform-browser' +import { AppComponent } from './app.component' +import { importProvidersFrom } from '@angular/core' +import { StoreModule } from '@ngrx/store' +import { EffectsModule } from '@ngrx/effects' import { DefaultDataServiceFactory, EntityDataModule } from '@ngrx/data' -import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http' import { DefaultEntityMetadataMap, KubernetesAuthorizerInterceptor, KubernetesDataServiceFactory, KubernetesDataServiceFactoryConfig, } from '@ccremer/kubernetes-client-angular' -import { StoreModule } from '@ngrx/store' -import { EffectsModule } from '@ngrx/effects' -import { AppComponent } from './app.component' +import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http' -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - HttpClientModule, - StoreModule.forRoot(), - EffectsModule.forRoot(), - EntityDataModule.forRoot({ - entityMetadata: DefaultEntityMetadataMap, - }), - ], +bootstrapApplication(AppComponent, { providers: [ + importProvidersFrom( + BrowserModule, + StoreModule.forRoot(), + EffectsModule.forRoot(), + EntityDataModule.forRoot({ + entityMetadata: DefaultEntityMetadataMap, + }) + ), + provideHttpClient(withInterceptorsFromDi()), { provide: DefaultDataServiceFactory, useClass: KubernetesDataServiceFactory }, { provide: HTTP_INTERCEPTORS, useClass: KubernetesAuthorizerInterceptor, multi: true }, { @@ -71,13 +69,11 @@ import { AppComponent } from './app.component' useValue: { default: { usePatchInUpsert: true, - usePatchInUpdate: false, }, } satisfies KubernetesDataServiceFactoryConfig, }, ], -}) -export class AppModule {} +}).catch((err) => console.error(err)) ``` Optional but highly recommended: Create an extendable Service for each entity, for example in `config-map.service.ts`: @@ -107,6 +103,7 @@ import { KubernetesAuthorizerService } from '@ccremer/kubernetes-client-angular' selector: 'app-root', template: '

Kubernetes Client for Angular in Action

', styles: [], + standalone: true, }) export class AppComponent implements OnInit { constructor(private configMapService: ConfigMapService, authorizer: KubernetesAuthorizerService) { diff --git a/packages/kubernetes-client-angular/projects/kubernetes-client-angular/README.md.njk b/packages/kubernetes-client-angular/projects/kubernetes-client-angular/README.md.njk index 1e33bf9..63ebdb1 100644 --- a/packages/kubernetes-client-angular/projects/kubernetes-client-angular/README.md.njk +++ b/packages/kubernetes-client-angular/projects/kubernetes-client-angular/README.md.njk @@ -35,9 +35,9 @@ Install the dependencies npm install @ccremer/kubernetes-client @ccremer/kubernetes-client-angular ``` -Setup the module with `@ngrx/data` in `app.module.ts`: +Setup the module with `@ngrx/data` in `main.ts`: ```typescript -{% include "projects/kubernetes-client-angular/examples/app.module.ts" -%} +{% include "projects/kubernetes-client-angular/examples/main.ts" -%} ``` Optional but highly recommended: Create an extendable Service for each entity, for example in `config-map.service.ts`: diff --git a/packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/app.component.ts b/packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/app.component.ts index e58e623..6887b71 100644 --- a/packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/app.component.ts +++ b/packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/app.component.ts @@ -6,6 +6,7 @@ import { KubernetesAuthorizerService } from '@ccremer/kubernetes-client-angular' selector: 'app-root', template: '

Kubernetes Client for Angular in Action

', styles: [], + standalone: true, }) export class AppComponent implements OnInit { constructor(private configMapService: ConfigMapService, authorizer: KubernetesAuthorizerService) { diff --git a/packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/app.module.ts b/packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/main.ts similarity index 58% rename from packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/app.module.ts rename to packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/main.ts index 94192b1..2263a87 100644 --- a/packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/app.module.ts +++ b/packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/main.ts @@ -1,30 +1,28 @@ -import { NgModule } from '@angular/core' -import { BrowserModule } from '@angular/platform-browser' - +import { bootstrapApplication, BrowserModule } from '@angular/platform-browser' +import { AppComponent } from './app.component' +import { importProvidersFrom } from '@angular/core' +import { StoreModule } from '@ngrx/store' +import { EffectsModule } from '@ngrx/effects' import { DefaultDataServiceFactory, EntityDataModule } from '@ngrx/data' -import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http' import { DefaultEntityMetadataMap, KubernetesAuthorizerInterceptor, KubernetesDataServiceFactory, KubernetesDataServiceFactoryConfig, } from '@ccremer/kubernetes-client-angular' -import { StoreModule } from '@ngrx/store' -import { EffectsModule } from '@ngrx/effects' -import { AppComponent } from './app.component' +import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http' -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - HttpClientModule, - StoreModule.forRoot(), - EffectsModule.forRoot(), - EntityDataModule.forRoot({ - entityMetadata: DefaultEntityMetadataMap, - }), - ], +bootstrapApplication(AppComponent, { providers: [ + importProvidersFrom( + BrowserModule, + StoreModule.forRoot(), + EffectsModule.forRoot(), + EntityDataModule.forRoot({ + entityMetadata: DefaultEntityMetadataMap, + }) + ), + provideHttpClient(withInterceptorsFromDi()), { provide: DefaultDataServiceFactory, useClass: KubernetesDataServiceFactory }, { provide: HTTP_INTERCEPTORS, useClass: KubernetesAuthorizerInterceptor, multi: true }, { @@ -32,10 +30,8 @@ import { AppComponent } from './app.component' useValue: { default: { usePatchInUpsert: true, - usePatchInUpdate: false, }, } satisfies KubernetesDataServiceFactoryConfig, }, ], -}) -export class AppModule {} +}).catch((err) => console.error(err)) diff --git a/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/app.component.ts b/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/app.component.ts index 8df1965..9f22822 100644 --- a/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/app.component.ts +++ b/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/app.component.ts @@ -1,11 +1,13 @@ import { Component, OnInit } from '@angular/core' -import { Router } from '@angular/router' +import { Router, RouterOutlet } from '@angular/router' import { KubernetesAuthorizerService } from 'kubernetes-client-angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], + standalone: true, + imports: [RouterOutlet], }) export class AppComponent implements OnInit { constructor(private router: Router, private authorizer: KubernetesAuthorizerService) {} diff --git a/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/app.module.ts b/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/app.module.ts deleted file mode 100644 index 04d6637..0000000 --- a/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/app.module.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { NgModule } from '@angular/core' -import { BrowserModule } from '@angular/platform-browser' - -import { AppRoutingModule } from './app-routing.module' -import { AppComponent } from './app.component' -import { LoginModule } from './login/login.module' -import { DefaultDataServiceFactory, EntityDataModule } from '@ngrx/data' -import { StoreDevtoolsModule } from '@ngrx/store-devtools' -import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http' -import { - DefaultEntityMetadataMap, - KubernetesAuthorizerInterceptor, - KubernetesDataServiceFactory, - KubernetesDataServiceFactoryConfig, -} from 'kubernetes-client-angular' -import { StoreModule } from '@ngrx/store' -import { EffectsModule } from '@ngrx/effects' -import { ClientComponent } from './client/client.component' - -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - AppRoutingModule, - LoginModule, - HttpClientModule, - StoreModule.forRoot(), - EffectsModule.forRoot(), - EntityDataModule.forRoot({ - entityMetadata: DefaultEntityMetadataMap, - }), - StoreDevtoolsModule.instrument(), - ClientComponent, - ], - providers: [ - { provide: DefaultDataServiceFactory, useClass: KubernetesDataServiceFactory }, - { provide: HTTP_INTERCEPTORS, useClass: KubernetesAuthorizerInterceptor, multi: true }, - { - provide: KubernetesDataServiceFactoryConfig, - useValue: { - default: { - usePatchInUpsert: true, - }, - } satisfies KubernetesDataServiceFactoryConfig, - }, - ], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/client/client.component.ts b/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/client/client.component.ts index 10c7a23..04f23c5 100644 --- a/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/client/client.component.ts +++ b/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/client/client.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core' import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms' -import { CommonModule } from '@angular/common' +import { CommonModule, NgFor } from '@angular/common' import { SecretService } from '../store/secret.service' import { ConfigMapService } from '../store/config-map.service' import { KubeObject } from '@ccremer/kubernetes-client/types/core' @@ -11,7 +11,7 @@ import { ListOptions } from '@ccremer/kubernetes-client/api' @Component({ standalone: true, - imports: [ReactiveFormsModule, CommonModule], + imports: [ReactiveFormsModule, CommonModule, NgFor], selector: 'app-client', templateUrl: './client.component.html', styleUrls: ['./client.component.scss'], diff --git a/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/login/login.component.ts b/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/login/login.component.ts index c2e20b4..f5f5e87 100644 --- a/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/login/login.component.ts +++ b/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/login/login.component.ts @@ -2,11 +2,15 @@ import { Component } from '@angular/core' import { SelfSubjectRulesReviewService } from '../store/self-subject-rules-review.service' import { Router } from '@angular/router' import { KubernetesAuthorizerService } from 'kubernetes-client-angular' +import { TokenInputComponent } from './token-input/token-input.component' +import { NgFor } from '@angular/common' @Component({ selector: 'app-page', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'], + standalone: true, + imports: [NgFor, TokenInputComponent], }) export class LoginComponent { initialValue: string diff --git a/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/login/login.module.ts b/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/login/login.module.ts deleted file mode 100644 index 9d1ed81..0000000 --- a/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/app/login/login.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { NgModule } from '@angular/core' -import { CommonModule } from '@angular/common' -import { LoginComponent } from './login.component' -import { TokenInputComponent } from './token-input/token-input.component' - -@NgModule({ - declarations: [LoginComponent], - imports: [CommonModule, TokenInputComponent], - exports: [], -}) -export class LoginModule {} diff --git a/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/main.ts b/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/main.ts index 53e1368..21921b7 100644 --- a/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/main.ts +++ b/packages/kubernetes-client-angular/projects/kubernetes-client-example-angular/src/main.ts @@ -1,7 +1,41 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' +import { importProvidersFrom } from '@angular/core' +import { AppComponent } from './app/app.component' +import { StoreDevtoolsModule } from '@ngrx/store-devtools' +import { EffectsModule } from '@ngrx/effects' +import { StoreModule } from '@ngrx/store' +import { AppRoutingModule } from './app/app-routing.module' +import { bootstrapApplication, BrowserModule } from '@angular/platform-browser' +import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http' +import { + DefaultEntityMetadataMap, + KubernetesAuthorizerInterceptor, + KubernetesDataServiceFactory, + KubernetesDataServiceFactoryConfig, +} from 'kubernetes-client-angular' +import { DefaultDataServiceFactory, EntityDataModule } from '@ngrx/data' -import { AppModule } from './app/app.module' - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom( + BrowserModule, + AppRoutingModule, + StoreModule.forRoot(), + EffectsModule.forRoot(), + EntityDataModule.forRoot({ + entityMetadata: DefaultEntityMetadataMap, + }), + StoreDevtoolsModule.instrument() + ), + provideHttpClient(withInterceptorsFromDi()), + { provide: DefaultDataServiceFactory, useClass: KubernetesDataServiceFactory }, + { provide: HTTP_INTERCEPTORS, useClass: KubernetesAuthorizerInterceptor, multi: true }, + { + provide: KubernetesDataServiceFactoryConfig, + useValue: { + default: { + usePatchInUpsert: true, + }, + } satisfies KubernetesDataServiceFactoryConfig, + }, + ], +}).catch((err) => console.error(err))