BREAKING CHANGE: update all code to angular 17 standalone components

src/ui/.env

@@ -0,0 +1,4 @@
+# Nx 18 enables using plugins to infer targets by default
+# This is disabled for existing workspaces to maintain compatibility
+# For more info, see: https://nx.dev/concepts/inferred-tasks
+NX_ADD_PLUGINS=false

src/ui/.gitignore

@@ -39,3 +39,5 @@ testem.log
 Thumbs.db
 
 .angular
+
+.nx/cache

src/ui/.npmrc

@@ -1,2 +1,2 @@
 //npm.pkg.github.com/:_authToken=${NPM_TOKEN}
-@moby-it:registry=https://npm.pkg.github.com/
+@moby-it:registry=https://npm.pkg.github.com/

src/ui/.prettierignore

@@ -2,3 +2,5 @@
 
 /dist
 /coverage
+
+/.nx/cache

src/ui/apps/client/project.json

@@ -48,32 +48,28 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "client:build:production"
+          "buildTarget": "client:build:production"
         },
         "development": {
-          "browserTarget": "client:build:development"
+          "buildTarget": "client:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "client:build"
+        "buildTarget": "client:build"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
-      "options": {
-        "lintFilePatterns": ["apps/client/**/*.ts", "apps/client/**/*.html"]
-      }
+      "executor": "@nx/eslint:lint"
     },
     "test": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/apps/client"],
       "options": {
-        "jestConfig": "apps/client/jest.config.ts",
-        "passWithNoTests": true
+        "jestConfig": "apps/client/jest.config.ts"
       }
     }
   },

src/ui/apps/client/src/app/app.component.html

@@ -1,3 +1,5 @@
 <ppo-top-bar></ppo-top-bar>
 <router-outlet></router-outlet>
-<ppo-loader *ngIf="loading$ | ngrxPush"></ppo-loader>
+@if (loading$ | ngrxPush) {
+  <ppo-loader></ppo-loader>
+}

src/ui/apps/client/src/app/app.component.ts

@@ -1,11 +1,16 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LoaderService } from '@ppo/shared/ui';
+import { LoaderComponent, LoaderService } from '@ppo/shared/ui';
+import { TopBarComponent } from './top-bar/top-bar.component';
+import { RouterModule } from '@angular/router';
+import { PushPipe } from '@ngrx/component';
 @Component({
   selector: 'ppo-root',
+  imports: [TopBarComponent, RouterModule, LoaderComponent, PushPipe],
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true
 })
 export class AppComponent {
-  constructor(private loaderService: LoaderService) {}
+  constructor(private loaderService: LoaderService) { }
   loading$ = this.loaderService.loading$;
 }

src/ui/apps/client/src/app/app.module.ts

@@ -1,65 +1,39 @@
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { ErrorHandler, NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { LetModule, PushModule } from '@ngrx/component';
+import { LetDirective, PushPipe } from '@ngrx/component';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { AuthDomainModule } from '@ppo/auth/domain';
-import { AuthFeatureUserFormModule } from '@ppo/auth/feature-user-form';
 import { PlayDomainModule } from '@ppo/play/domain';
-import { API_URL } from '@ppo/shared/config';
-import { SharedUiModule } from '@ppo/shared/ui';
+import { LoaderComponent, SharedUiModule } from '@ppo/shared/ui';
 import { UserDomainModule } from '@ppo/user/domain';
 import { ToastrModule } from 'ngx-toastr';
 import { environment } from '../environments/environment';
-import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app.routing.module';
-import { GlobalErrorHandler } from './errorHandler';
-import { TokenInterceptor } from './interceptors';
-import { TopBarComponent } from './top-bar/top-bar.component';
-import { UserStatusComponent } from './top-bar/user-status/user-status.component';
 @NgModule({
-  declarations: [
-    AppComponent,
-    TopBarComponent,
-    UserStatusComponent,
-  ],
   imports: [
     BrowserModule,
     HttpClientModule,
     BrowserAnimationsModule,
-    AppRoutingModule,
-    PushModule,
-    LetModule,
     StoreModule.forRoot({}),
     EffectsModule.forRoot([]),
     StoreDevtoolsModule.instrument({
       maxAge: 25, // Retains last 25 states
       logOnly: environment.production, // Restrict extension to log-only mode
       autoPause: true, // Pauses recording actions and state changes when the extension window is not open
+      connectInZone: true
     }),
     PlayDomainModule,
     AuthDomainModule,
     SharedUiModule,
     UserDomainModule,
-    AuthFeatureUserFormModule,
     ToastrModule.forRoot({
       positionClass: 'toast-bottom-right',
       timeOut: 5000,
       closeButton: true,
     }), // ToastrModule added
   ],
-  providers: [
-    { provide: API_URL, useValue: environment.apiUrl },
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: TokenInterceptor,
-      multi: true,
-    },
-    { provide: ErrorHandler, useClass: GlobalErrorHandler },
-  ],
-  bootstrap: [AppComponent],
 })
 export class AppModule { }

src/ui/apps/client/src/app/top-bar/top-bar.component.ts

@@ -1,12 +1,16 @@
 import { Component } from '@angular/core';
+import { UserStatusComponent } from './user-status/user-status.component';
+import { RouterModule } from '@angular/router';
 @Component({
   selector: 'ppo-top-bar',
+  imports: [UserStatusComponent, RouterModule],
   templateUrl: './top-bar.component.html',
   styles: [`
     :host {
         display: block;
         z-index: 10;
         }
-`]
+`],
+  standalone: true
 })
 export class TopBarComponent { }