step 3 - Bootstrap the application using standalone APIs

see https://v17.angular.io/guide/standalone-migration
I executed
ng g @angular/core:standalone
and select "Bootstrap the project using standalone APIs"

Note Step 2 did not change any files.

pdb-js/src/app/app.component.spec.ts

@@ -6,9 +6,9 @@ describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
     imports: [
-        RouterTestingModule
+        RouterTestingModule,
+        AppComponent
     ],
-    declarations: [AppComponent],
 }).compileComponents();
   }));
 

pdb-js/src/app/app.component.ts

@@ -1,11 +1,15 @@
 import { Component } from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
 import {MatIconRegistry} from '@angular/material/icon';
+import { MatAnchor } from '@angular/material/button';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [MatAnchor, RouterLink, RouterOutlet]
 })
 export class AppComponent {
   title = 'pdb';

pdb-js/src/app/app.module.ts

@@ -1,118 +0,0 @@
-import { BrowserModule } from "@angular/platform-browser";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { enableProdMode, NgModule } from "@angular/core";
-import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
-import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-
-import { AppRoutingModule } from "./app-routing.module";
-import { AppComponent } from "./app.component";
-import { MainPageComponent } from "./main-page/main-page.component";
-import { HelpPageComponent } from "./help-page/help-page.component";
-import { UploadPageComponent } from "./upload-page/upload-page.component";
-import { VisualizationPageComponent } from "./visualization-page/visualization-page.component";
-
-import { DatePickerComponent } from "./components/datepicker/date-picker.component";
-
-import { MatAutocompleteModule } from "@angular/material/autocomplete";
-import { MatButtonModule } from "@angular/material/button";
-import { MatCheckboxModule } from "@angular/material/checkbox";
-import { MatSelectModule } from "@angular/material/select";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatInputModule } from "@angular/material/input";
-import { MatProgressBarModule } from "@angular/material/progress-bar";
-import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
-import { MatRadioModule } from "@angular/material/radio";
-import { MatSnackBarModule } from "@angular/material/snack-bar";
-import { MatTooltipModule } from "@angular/material/tooltip";
-import { OverlayModule } from "@angular/cdk/overlay";
-import { YAxisDefinitionComponent } from "./y-axis-definition/y-axis-definition.component";
-import { QueryAutocompleteComponent } from "./query-autocomplete/query-autocomplete.component";
-import { LimitByComponent } from "./limit-by/limit-by.component";
-import { PlotDetailsComponent } from "./plot-details/plot-details.component";
-import { PlotViewComponent } from "./plot-view/plot-view.component";
-import {
-  GalleryFilterView,
-  GalleryItemView,
-  GalleryViewComponent,
-} from "./gallery-view/gallery-view.component";
-import { ImageToggleComponent } from "./image-toggle/image-toggle.component";
-import { DashboardPageComponent } from "./dashboard-page/dashboard-page.component";
-import { NewDashboardComponent } from "./dashboard-page/new-dashboard/new-dashboard.component";
-import {
-  MAT_DIALOG_DEFAULT_OPTIONS,
-  MatDialogModule,
-} from "@angular/material/dialog";
-import { MatTabsModule } from "@angular/material/tabs";
-import { MatTableModule } from "@angular/material/table";
-import { MatGridListModule } from "@angular/material/grid-list";
-import { MatCardModule } from "@angular/material/card";
-import { MatBadgeModule } from "@angular/material/badge";
-import { DashboardComponent } from "./dashboard-page/dashboard/dashboard.component";
-import { AddTextDialogComponent } from "./dashboard-page/dashboard/add-text-dialog/add-text-dialog.component";
-import { TextWidgetComponent } from "./dashboard-page/dashboard/text-widget/text-widget.component";
-import { AddPlotDialogComponent } from "./dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component";
-import { PlotWidgetComponent } from "./dashboard-page/dashboard/plot-widget/plot-widget.component";
-import { FullScreenPlotDialogComponent } from "./dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component";
-import { CustomizableGridComponent } from "./customizable-grid/customizable-grid.component";
-
-import { DragDropModule } from "@angular/cdk/drag-drop";
-import { ConfirmationDialogComponent } from "./confirmation-dialog/confirmation-dialog.component";
-import { FocusDirective } from "./focus.directive";
-import { MarkdownModule } from "ngx-markdown";
-
-@NgModule({ declarations: [AppComponent],
-    bootstrap: [AppComponent], imports: [MarkdownModule.forRoot(),
-        BrowserModule,
-        AppRoutingModule,
-        FormsModule,
-        ReactiveFormsModule,
-        DragDropModule,
-        MatAutocompleteModule,
-        MatBadgeModule,
-        MatButtonModule,
-        MatCardModule,
-        MatCheckboxModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatGridListModule,
-        MatInputModule,
-        MatRadioModule,
-        MatProgressBarModule,
-        MatProgressSpinnerModule,
-        MatSelectModule,
-        MatSnackBarModule,
-        MatTabsModule,
-        MatTableModule,
-        MatTooltipModule,
-        BrowserAnimationsModule,
-        OverlayModule, MainPageComponent,
-        HelpPageComponent,
-        UploadPageComponent,
-        DatePickerComponent,
-        VisualizationPageComponent,
-        YAxisDefinitionComponent,
-        QueryAutocompleteComponent,
-        LimitByComponent,
-        PlotDetailsComponent,
-        PlotViewComponent,
-        GalleryViewComponent,
-        GalleryItemView,
-        GalleryFilterView,
-        ImageToggleComponent,
-        DashboardPageComponent,
-        NewDashboardComponent,
-        DashboardComponent,
-        AddTextDialogComponent,
-        TextWidgetComponent,
-        AddPlotDialogComponent,
-        PlotWidgetComponent,
-        FullScreenPlotDialogComponent,
-        CustomizableGridComponent,
-        ConfirmationDialogComponent,
-        FocusDirective], providers: [{
-            provide: MAT_DIALOG_DEFAULT_OPTIONS,
-            useValue: { hasBackdrop: true },
-        }, provideHttpClient(withInterceptorsFromDi())] })
-export class AppModule {}
-
-enableProdMode();

pdb-js/src/main.ts

@@ -1,8 +1,34 @@
-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 { MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/dialog';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { MarkdownModule } from 'ngx-markdown';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { AppRoutingModule } from './app/app-routing.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { AppComponent } from './app/app.component';
 
 if (environment.production) {
   enableProdMode();
@@ -14,5 +40,14 @@ if (environment.production) {
 
 (<any>window).submitterId = (<any>window).randomId();
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(MarkdownModule.forRoot(), BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, DragDropModule, MatAutocompleteModule, MatBadgeModule, MatButtonModule, MatCardModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatGridListModule, MatInputModule, MatRadioModule, MatProgressBarModule, MatProgressSpinnerModule, MatSelectModule, MatSnackBarModule, MatTabsModule, MatTableModule, MatTooltipModule, OverlayModule),
+        {
+            provide: MAT_DIALOG_DEFAULT_OPTIONS,
+            useValue: { hasBackdrop: true },
+        }, provideHttpClient(withInterceptorsFromDi()),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));