Migrate to Angular standalone components

packages/kubernetes-client-angular/projects/kubernetes-client-angular/README.md

@@ -35,49 +35,45 @@ 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 },
  {
  provide: KubernetesDataServiceFactoryConfig,
  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: '<p>Kubernetes Client for Angular in Action</p>',
  styles: [],
+ standalone: true,
 })
 export class AppComponent implements OnInit {
  constructor(private configMapService: ConfigMapService, authorizer: KubernetesAuthorizerService) {

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`:

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: '<p>Kubernetes Client for Angular in Action</p>',
  styles: [],
+ standalone: true,
 })
 export class AppComponent implements OnInit {
  constructor(private configMapService: ConfigMapService, authorizer: KubernetesAuthorizerService) {

packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/app.module.ts → packages/kubernetes-client-angular/projects/kubernetes-client-angular/examples/main.ts

@@ -1,41 +1,37 @@
-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 },
  {
  provide: KubernetesDataServiceFactoryConfig,
  useValue: {
  default: {
  usePatchInUpsert: true,
- usePatchInUpdate: false,
  },
  } satisfies KubernetesDataServiceFactoryConfig,
  },
  ],
-})
-export class AppModule {}
+}).catch((err) => console.error(err))

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) {}

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'],

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

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))