Make all components standalone with explicit imports

Author: VashJuan

src/app/app.component.ts

@@ -1,14 +1,28 @@
 import { filter, map, switchMap } from 'rxjs'
 
 import { Component, OnInit, HostListener } from '@angular/core'
-import { MatSnackBar } from '@angular/material/snack-bar'
+import { RouterModule } from '@angular/router'
+import { MatSnackBarModule } from '@angular/material/snack-bar'
 //import { MatSnackBar } from '@material/snackbar'
 import { SwUpdate, VersionReadyEvent } from '@angular/service-worker'
 
 import { LogService } from './shared/services'
+import { HeaderComponent } from './shared/header/header.component'
+import { NavbarComponent } from './shared/navbar/navbar.component'
+import { FooterComponent } from './shared/footer/footer.component'
+import { AlertsComponent } from './shared/alerts/alerts.component'
 
 @Component({
   selector: 'rangertrak-root',
+  standalone: true,
+  imports: [
+    RouterModule,
+    MatSnackBarModule,
+    HeaderComponent,
+    NavbarComponent,
+    FooterComponent,
+    AlertsComponent
+  ],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })

src/app/app.module.ts

@@ -50,7 +50,7 @@ import { HeaderComponent, AlertsComponent, FooterComponent, IconsComponent, Inst
   // Import sub-modules
   imports: [
     BrowserAnimationsModule,
-    BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    BrowserModule,
     CommonModule,
     // DayjsModule,
     FormsModule,
@@ -71,19 +71,29 @@ import { HeaderComponent, AlertsComponent, FooterComponent, IconsComponent, Inst
       // Register the ServiceWorker as soon as the app is stable
       // or after 30 seconds (whichever comes first).
       registrationStrategy: 'registerWhenStable:30000'
-    })
+    }),
+    // Import standalone components
+    AppComponent,
+    HeaderComponent,
+    AlertsComponent,
+    FooterComponent,
+    IconsComponent,
+    InstallPromptComponent,
+    NavbarComponent,
+    TimePickerComponent,
+    X404Component
   ],
 
   // Define all the components, directives and pipes,
   // that are declared and used inside this module.
   // ? If you want to use any of these in multiple modules,
   // bundle it into a separate module & import that in the module
   declarations: [
-    AppComponent,
+    //AppComponent, // Now standalone
     //AppShellComponent,
-    NavbarComponent,
-    FooterComponent,
-    AlertsComponent,
+    //NavbarComponent, // Now standalone
+    //FooterComponent, // Now standalone
+    //AlertsComponent, // Now standalone
     GmapComponent,
     LmapComponent,
     EntryComponent,
@@ -93,12 +103,15 @@ import { HeaderComponent, AlertsComponent, FooterComponent, IconsComponent, Inst
     //MoodEditor,
     //MoodRenderer,
     RangersComponent,
-    X404Component,
+    //X404Component, // Now standalone
     LogComponent,
     LocationComponent,
     MiniGMapComponent,
-    MiniLMapComponent,
-    HeaderComponent,
+    MiniLMapComponent
+    //HeaderComponent, // Now standalone
+    //TimePickerComponent, // Now standalone
+    //IconsComponent, // Now standalone
+    //InstallPromptComponent // Now standalone,
     TimePickerComponent,
     IconsComponent,
     InstallPromptComponent
@@ -118,8 +131,7 @@ import { HeaderComponent, AlertsComponent, FooterComponent, IconsComponent, Inst
   // per https://angular.io/guide/singleton-services
   providers: [
     //ClockService, FieldReportService, LogService, PopupService, RangerService, SettingsService,
-    { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 2500 } },
-    { provide: MAT_COLOR_FORMATS, useValue: NGX_MAT_COLOR_FORMATS }
+    { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 2500 } }
   ],
   //{provide: MAT_BANNER_DEFAULT_OPTIONS}],
   // Ranger,
@@ -133,6 +145,11 @@ import { HeaderComponent, AlertsComponent, FooterComponent, IconsComponent, Inst
   exports: [
     //AppShellComponent
     //   SettingsComponent
+    RouterModule,
+    MaterialModule,
+    FormsModule,
+    ReactiveFormsModule,
+    CommonModule
   ]
 })
 export class AppModule { }

src/app/shared/alerts/alerts.component.ts

@@ -1,8 +1,8 @@
 import { Subscription } from 'rxjs'
 
-import { DOCUMENT } from '@angular/common'
+import { CommonModule, DOCUMENT } from '@angular/common'
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core'
-import { MatSnackBar } from '@angular/material/snack-bar'
+import { MatSnackBarModule } from '@angular/material/snack-bar'
 import { NavigationEnd } from '@angular/router'
 //import { MatFormFieldModule } from '@angular/material/form-field';
 import { MDCBanner } from '@material/banner'
@@ -14,6 +14,8 @@ import { LogService } from '../services/log.service'
 
 @Component({
   selector: 'rangertrak-alerts',
+  standalone: true,
+  imports: [CommonModule, MatSnackBarModule],
   templateUrl: './alerts.component.html',
   styleUrls: ['./alerts.component.scss']
 })

src/app/shared/footer/footer.component.ts

@@ -1,15 +1,17 @@
 import { Subscription } from 'rxjs'
 
+import { CommonModule, DOCUMENT, formatDate } from '@angular/common'
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core'
 
 import { LogService, SettingsService, SettingsType } from '../services'
-import { DOCUMENT, formatDate } from '@angular/common'
 import { Utility } from '../utility';
 /**
  * Footer component
  */
 @Component({
   selector: 'rangertrak-footer',
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss']
 })

src/app/shared/header/header.component.ts

@@ -1,5 +1,6 @@
 import { interval, map, Observable, Subscription } from 'rxjs'
 
+import { CommonModule } from '@angular/common'
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 
 import { ClockService, LogService, SettingsService, SettingsType } from '../services'
@@ -17,6 +18,8 @@ import { Utility } from '../'
  */
 @Component({
   selector: 'pageHeader',
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss']
 })

src/app/shared/icons/icons.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 
 import { faMapMarkedAlt, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { mdiAccount, mdiInformationOutline } from '@mdi/js';
-import { MatIconRegistry } from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 //import { lookupCollections, locate } from '@iconify/json'; //https://docs.iconify.design/icons/all.html vs https://docs.iconify.design/icons/icons.html
 import { DomSanitizer } from '@angular/platform-browser';
 import { LogService } from '../services';
@@ -49,6 +49,8 @@ type Options = {|
 
 @Component({
   selector: 'rangertrak-icons',
+  standalone: true,
+  imports: [MatIconModule],
   templateUrl: './icons.component.html',
   styleUrls: ['./icons.component.scss']
 })

src/app/shared/install-prompt/install-prompt.component.ts

@@ -1,7 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @Component({
   selector: 'rangertrak-install-prompt',
+  standalone: true,
+  imports: [MatButtonModule, MatDialogModule],
   templateUrl: './install-prompt.component.html',
   styleUrls: ['./install-prompt.component.scss']
 })

src/app/shared/navbar/navbar.component.ts

@@ -1,6 +1,8 @@
+import { CommonModule } from '@angular/common'
 import { Component, OnInit } from '@angular/core'
-import { NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
+import { NavigationEnd, NavigationError, NavigationStart, Router, RouterModule } from '@angular/router';
 import { faL, faMapMarkedAlt } from '@fortawesome/free-solid-svg-icons'
+import { MatProgressBarModule } from '@angular/material/progress-bar'
 import { MDCTopAppBar } from '@material/top-app-bar'
 // import { MatButton } from '@angular/material/button'
 // import { MatButtonModule } from '@angular/material/button'
@@ -11,6 +13,8 @@ import { Utility } from '../utility';
 
 @Component({
   selector: 'rangertrak-navbar',
+  standalone: true,
+  imports: [CommonModule, RouterModule, MatProgressBarModule],
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss']
 })

src/app/shared/time-picker/time-picker.component.ts

@@ -3,13 +3,16 @@ import {
   debounceTime, map, Observable, startWith, subscribeOn, Subscription, switchMap
 } from 'rxjs'
 
-import { DOCUMENT } from '@angular/common'
+import { CommonModule, DOCUMENT } from '@angular/common'
 import { Component, EventEmitter, Inject, Input, OnInit, Output, ViewChild } from '@angular/core'
 import {
   FormControl, FormGroup, FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup,
   Validators
 } from '@angular/forms'
-import { ThemePalette } from '@angular/material/core'
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatNativeDateModule } from '@angular/material/core'
 
 import {
   FieldReportService, FieldReportStatusType, LocationType, LogService, RangerService, RangerType,
@@ -38,6 +41,16 @@ import {
 
 @Component({
   selector: 'rangertrak-time-picker',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatNativeDateModule
+  ],
   templateUrl: './time-picker.component.html',
   styleUrls: ['./time-picker.component.scss']
 })
@@ -88,7 +101,7 @@ export class TimePickerComponent implements OnInit {
   public stepHour = 1
   public stepMinute = 1
   public stepSecond = 1
-  public color: ThemePalette = 'primary'
+  public color: 'primary' | 'accent' | 'warn' = 'primary'
   disableMinute = false
   hideTime = false
   //dateCtrl = new FormControl(new Date()) //TODO: Still need to grab the result during submit...!

src/app/x404/x404.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core'
+import { HeaderComponent } from '../shared/header/header.component'
 
 // TODO: https://bobrov.dev/blog/angular-smart-404-page/ - suggest the *right* page!
 
@@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core'
  */
 @Component({
   selector: 'rangertrak-x404',
+  standalone: true,
+  imports: [HeaderComponent],
   templateUrl: './x404.component.html',
   styleUrls: ['./x404.component.scss']
 })