Migrate to Angular standalone components

Author: ccremer

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 renamed to 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/app.module.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/client/client.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/app/login/login.component.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))