update router to use standalone components and lazy loading

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

@@ -1,29 +0,0 @@
-import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from "@angular/router";
-import { VisualizationPageComponent } from "./visualization-page/visualization-page.component";
-import { MainPageComponent } from "./main-page/main-page.component";
-import { UploadPageComponent } from "./upload-page/upload-page.component";
-import { HelpPageComponent } from "./help-page/help-page.component";
-import { DashboardPageComponent } from "./dashboard-page/dashboard-page.component";
-import { DashboardComponent } from "./dashboard-page/dashboard/dashboard.component";
-import { CustomizableGridComponent } from "./customizable-grid/customizable-grid.component";
-
-const routes: Routes = [
-  { path: "", component: MainPageComponent },
-  { path: "vis", component: VisualizationPageComponent },
-  { path: "dashboard", component: DashboardPageComponent },
-  { path: "dashboard/:id", component: DashboardComponent },
-  { path: "upload", component: UploadPageComponent },
-  { path: "grid", component: CustomizableGridComponent },
-  { path: "help", component: HelpPageComponent },
-  // { path: '**', component: PageNotFoundComponent }
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, {}),
-  ],
-  declarations: [],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}

pdb-js/src/main.ts

@@ -1,5 +1,4 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 
 import { environment } from './environments/environment';
@@ -7,7 +6,6 @@ import { MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/d
 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';
@@ -29,6 +27,7 @@ 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';
+import { provideRouter, Routes, withDebugTracing } from '@angular/router';
 
 if (environment.production) {
   enableProdMode();
@@ -40,9 +39,44 @@ if (environment.production) {
 
 (<any>window).submitterId = (<any>window).randomId();
 
+
+const routes: Routes = [
+  { path: "", loadComponent: () => import("./app/main-page/main-page.component").then( m => m.MainPageComponent) },
+  { path: "vis", loadComponent: () => import("./app/visualization-page/visualization-page.component").then(m => m.VisualizationPageComponent) },
+  { path: "dashboard", loadComponent: () => import("./app/dashboard-page/dashboard-page.component").then(m => m.DashboardPageComponent) },
+  { path: "dashboard/:id", loadComponent: () => import("./app/dashboard-page/dashboard/dashboard.component").then(m => m.DashboardComponent) },
+  { path: "upload", loadComponent: () => import("./app/upload-page/upload-page.component").then(m => m.UploadPageComponent) },
+  { path: "grid", loadComponent: () => import("./app/customizable-grid/customizable-grid.component").then(m => m.CustomizableGridComponent) },
+  { path: "help", loadComponent: () => import("./app/help-page/help-page.component").then(m => m.HelpPageComponent) },
+];
+
 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),
+        provideRouter(routes, withDebugTracing()),
+        importProvidersFrom(
+          MarkdownModule.forRoot(), 
+          BrowserModule,
+          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 },