From 8fef6661835c1d834da8e8c65ce1e88fbd5f799b Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Sun, 13 Oct 2024 10:22:18 +0200 Subject: [PATCH] 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 | 4 +- pdb-js/src/app/app.component.ts | 10 ++- pdb-js/src/app/app.module.ts | 118 --------------------------- pdb-js/src/main.ts | 41 +++++++++- 4 files changed, 47 insertions(+), 126 deletions(-) delete mode 100644 pdb-js/src/app/app.module.ts diff --git a/pdb-js/src/app/app.component.spec.ts b/pdb-js/src/app/app.component.spec.ts index 67b6ee5..7d1dd11 100644 --- a/pdb-js/src/app/app.component.spec.ts +++ b/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(); })); diff --git a/pdb-js/src/app/app.component.ts b/pdb-js/src/app/app.component.ts index 5b955d6..d81787f 100644 --- a/pdb-js/src/app/app.component.ts +++ b/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'; diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts deleted file mode 100644 index c1d1221..0000000 --- a/pdb-js/src/app/app.module.ts +++ /dev/null @@ -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(); diff --git a/pdb-js/src/main.ts b/pdb-js/src/main.ts index 73613d2..71101ba 100644 --- a/pdb-js/src/main.ts +++ b/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) { (window).submitterId = (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));