feat: use modules

Author: Angular2Guy

frontend/src/angular/src/app/app.component.ts

@@ -13,12 +13,20 @@
    limitations under the License.
  */
 import { Component } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { Router, RouterModule } from "@angular/router";
 
 @Component({
     selector: "app-root",
+    imports: [
+      RouterModule,
+      BrowserModule,        
+        BrowserAnimationsModule,
+        MatProgressSpinnerModule],
     templateUrl: "./app.component.html",
     styleUrls: ["./app.component.scss"],
-    standalone: false
 })
 export class AppComponent {
   protected title = "app";

frontend/src/angular/src/app/app.config.ts

@@ -0,0 +1,24 @@
+/*
+   Copyright 2016 Sven Loesekann
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+import { ApplicationConfig, importProvidersFrom } from "@angular/core";
+import { provideAnimations } from "@angular/platform-browser/animations";
+import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
+import { provideRouter } from "@angular/router";
+import { routes } from "./app.routes";
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes), provideAnimations(), provideHttpClient(withInterceptorsFromDi())]
+};

frontend/src/angular/src/app/app.module.ts

@@ -12,21 +12,14 @@
    See the License for the specific language governing permissions and
    limitations under the License.
  */
-import { NgModule } from "@angular/core";
 import { Routes, RouterModule } from "@angular/router";
 import { SplashComponent } from "./splash/splash.component";
 
-const routes: Routes = [
+export const routes: Routes = [
   { path: "", redirectTo: "/splash", pathMatch: "full" },
   {
     path: "maps",
-    loadChildren: () => import("./maps/maps.module").then((m) => m.MapsModule),
+    loadChildren: () => import("./maps/maps.routes").then((m) => m.routes),
   },
   { path: "splash", component: SplashComponent },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, {})],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}

frontend/src/angular/src/app/app-routing.module.ts renamed to frontend/src/angular/src/app/app.routes.ts

@@ -23,33 +23,37 @@ import {
   DestroyRef,
   inject,
 } from "@angular/core";
-import { CompanySiteService } from "../services/company-site.service";
+import { CompanySiteService } from "../../services/company-site.service";
 import "bingmaps";
-import { ConfigurationService } from "../services/configuration.service";
+import { ConfigurationService } from "../../services/configuration.service";
 import { MainConfiguration } from "../model/main-configuration";
 import { Observable, of, iif, Subject, forkJoin } from "rxjs";
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CompanySite } from "../model/company-site";
-import { FormBuilder, Validators } from "@angular/forms";
+import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
 import {
   switchMap,
   debounceTime,
   filter,
-  flatMap,
-  tap,
-  map,
+  mergeMap,
 } from "rxjs/operators";
 import { BingMapsService } from "../../services/bing-maps.service";
-import { MatSelectionListChange } from "@angular/material/list";
+import { MatListModule, MatSelectionListChange } from "@angular/material/list";
 import { Polygon } from "../model/polygon";
 import { Location } from "../model/location";
 import { Ring } from "../model/ring";
-import { MatDialog } from "@angular/material/dialog";
+import { MatDialog, MatDialogModule } from "@angular/material/dialog";
 import {
   PolygonDeleteDialogComponent,
   MyDialogResult,
   DialogMetaData,
 } from "../polygon-delete-dialog/polygon-delete-dialog.component";
+import { CommonModule } from "@angular/common";
+import { MatAutocompleteModule } from "@angular/material/autocomplete";
+import { MatButtonModule } from "@angular/material/button";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatSliderModule } from "@angular/material/slider";
 
 interface Container {
   companySite: CompanySite;
@@ -69,9 +73,19 @@ interface PolygonMetaData {
 
 @Component({
     selector: "app-company-site",
+    imports: [ 
+      CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatAutocompleteModule,
+    MatFormFieldModule,
+    MatSliderModule,
+    MatInputModule,
+    MatListModule,
+    MatButtonModule,
+    MatDialogModule,],
     templateUrl: "./company-site.component.html",
     styleUrls: ["./company-site.component.scss"],
-    standalone: false
 })
 export class CompanySiteComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild("bingMap")
@@ -173,10 +187,10 @@ export class CompanySiteComponent implements OnInit, AfterViewInit, OnDestroy {
             !!myContainer.companySite.polygons &&
             !!myContainer.mainConfiguration
         ),
-        flatMap((myContainer) =>
+        mergeMap((myContainer) =>
           this.bingMapsService
             .initialize(myContainer.mainConfiguration.mapKey)
-            .pipe(flatMap(() => of(myContainer)))
+            .pipe(mergeMap(() => of(myContainer)))
         ),
         takeUntilDestroyed(this.destroy)
       )

frontend/src/angular/src/app/maps/company-site/company-site.component.ts

@@ -0,0 +1,13 @@
+/**
+ *    Copyright 2018 Sven Loesekann
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+       http://www.apache.org/licenses/LICENSE-2.0
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+export * from './maps.routes';    

frontend/src/angular/src/app/maps/index.ts

@@ -13,21 +13,14 @@
    limitations under the License.
  */
 import { Routes, RouterModule } from "@angular/router";
-import { NgModule } from "@angular/core";
 import { CompanySiteComponent } from "./company-site/company-site.component";
 import { AuthGuardService } from "../services/auth-guard.service";
 
-const routes: Routes = [
+export const routes: Routes = [
   { path: "", redirectTo: "companySite", pathMatch: "full" },
   {
     path: "companySite",
     component: CompanySiteComponent,
     canActivate: [AuthGuardService],
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class MapsRoutingModule {}

frontend/src/angular/src/app/maps/maps.module.ts

@@ -9,8 +9,16 @@
    See the License for the specific language governing permissions and
    limitations under the License.
  */
+import { CommonModule } from "@angular/common";
 import { Component, Inject } from "@angular/core";
-import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { ReactiveFormsModule, FormsModule } from "@angular/forms";
+import { MatAutocompleteModule } from "@angular/material/autocomplete";
+import { MatButtonModule } from "@angular/material/button";
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from "@angular/material/dialog";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatListModule } from "@angular/material/list";
+import { MatSliderModule } from "@angular/material/slider";
 
 // eslint-disable-next-line no-shadow
 export enum MyDialogResult {
@@ -25,9 +33,20 @@ export interface DialogMetaData {
 
 @Component({
     selector: "app-polygon-delete-dialog",
+    imports: [
+      CommonModule,
+      ReactiveFormsModule,
+      FormsModule,
+      MatAutocompleteModule,
+      MatFormFieldModule,
+      MatSliderModule,
+      MatInputModule,
+      MatListModule,
+      MatButtonModule,
+      MatDialogModule
+    ],
     templateUrl: "./polygon-delete-dialog.component.html",
-    styleUrls: ["./polygon-delete-dialog.component.scss"],
-    standalone: false
+    styleUrls: ["./polygon-delete-dialog.component.scss"],    
 })
 export class PolygonDeleteDialogComponent {
   protected dialogResults = MyDialogResult;