feat(clientApp): change structure to use standalone components

src/Web/ClientApp/src/app/app.component.ts

@@ -1,8 +1,12 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { NavMenuComponent } from './nav-menu/nav-menu.component';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html'
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    standalone: true,
+    imports: [NavMenuComponent, RouterOutlet]
 })
 export class AppComponent {
   title = 'app';

src/Web/ClientApp/src/app/counter/counter.component.spec.ts

@@ -7,8 +7,8 @@ describe('CounterComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CounterComponent ]
-    })
+    imports: [CounterComponent]
+})
     .compileComponents();
   }));
 

src/Web/ClientApp/src/app/counter/counter.component.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-counter-component',
-  templateUrl: './counter.component.html'
+    selector: 'app-counter-component',
+    templateUrl: './counter.component.html',
+    standalone: true
 })
 export class CounterComponent {
   public currentCount = 0;

src/Web/ClientApp/src/app/fetch-data/fetch-data.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 import { WeatherForecastsClient, WeatherForecast } from '../web-api-client';
+import { NgIf, NgFor, DatePipe } from '@angular/common';
 
 @Component({
-  selector: 'app-fetch-data',
-  templateUrl: './fetch-data.component.html'
+    selector: 'app-fetch-data',
+    templateUrl: './fetch-data.component.html',
+    standalone: true,
+    imports: [NgIf, NgFor, DatePipe]
 })
 export class FetchDataComponent {
   public forecasts: WeatherForecast[] = [];

src/Web/ClientApp/src/app/home/home.component.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-home',
-  templateUrl: './home.component.html',
+    selector: 'app-home',
+    templateUrl: './home.component.html',
+    standalone: true,
 })
 export class HomeComponent {
 }

src/Web/ClientApp/src/app/nav-menu/nav-menu.component.ts

@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
-  selector: 'app-nav-menu',
-  templateUrl: './nav-menu.component.html',
-  styleUrls: ['./nav-menu.component.scss']
+    selector: 'app-nav-menu',
+    templateUrl: './nav-menu.component.html',
+    styleUrls: ['./nav-menu.component.scss'],
+    standalone: true,
+    imports: [RouterLink, NgClass, RouterLinkActive]
 })
 export class NavMenuComponent {
   isExpanded = false;

src/Web/ClientApp/src/app/todo/todo.component.ts

@@ -5,11 +5,15 @@ import { TodoListsClient, TodoItemsClient,
   CreateTodoListCommand, UpdateTodoListCommand,
   CreateTodoItemCommand, UpdateTodoItemCommand, UpdateTodoItemDetailCommand
 } from '../web-api-client';
+import { FormsModule } from '@angular/forms';
+import { NgIf, NgFor, NgClass, JsonPipe } from '@angular/common';
 
 @Component({
-  selector: 'app-todo-component',
-  templateUrl: './todo.component.html',
-  styleUrls: ['./todo.component.scss']
+    selector: 'app-todo-component',
+    templateUrl: './todo.component.html',
+    styleUrls: ['./todo.component.scss'],
+    standalone: true,
+    imports: [NgIf, NgFor, NgClass, FormsModule, JsonPipe]
 })
 export class TodoComponent implements OnInit {
   debug = false;

src/Web/ClientApp/src/main.ts

@@ -1,8 +1,20 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { TodoComponent } from './app/todo/todo.component';
+import { FetchDataComponent } from './app/fetch-data/fetch-data.component';
+import { CounterComponent } from './app/counter/counter.component';
+import { HomeComponent } from './app/home/home.component';
+import { provideRouter } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { AuthorizeInterceptor } from 'src/api-authorization/authorize.interceptor';
+import { HTTP_INTERCEPTORS, withInterceptorsFromDi, provideHttpClient } from '@angular/common/http';
 
 export function getBaseUrl() {
   return document.getElementsByTagName('base')[0].href;
@@ -16,5 +28,18 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic(providers).bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), FormsModule, ModalModule.forRoot()),
+        { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideRouter([
+            { path: '', component: HomeComponent, pathMatch: 'full' },
+            { path: 'counter', component: CounterComponent },
+            { path: 'fetch-data', component: FetchDataComponent },
+            { path: 'todo', component: TodoComponent }
+        ]),
+        provideAnimations()
+    ]
+})
   .catch(err => console.log(err));