feat: Migrate to standalone APIs

* Converted all components/directives/pipes to standalone
* Removed unnecessary NgModule classes
* Application is now bootstrapped using standalone APIs
* Convert HttpInterceptors to functional interceptors

Some of the migration is automated with schematics.  Downstream projects should rerun the migration schematics.
`npx ng generate @angular/core:standalone`

src/app/app.component.spec.ts

@@ -1,13 +1,12 @@
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ModalModule } from 'ngx-bootstrap/modal';
-import { PopoverModule } from 'ngx-bootstrap/popover';
 import { of } from 'rxjs';
 
-import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { ConfigService, CoreModule } from './core/core.module';
-import { SiteModule } from './site/site.module';
+import { ConfigService } from './core/config.service';
 
 describe('AppComponent', () => {
 	let configServiceSpy: any;
@@ -17,15 +16,12 @@ describe('AppComponent', () => {
 		configServiceSpy.getConfig.and.returnValue(of({}));
 
 		TestBed.configureTestingModule({
-			declarations: [AppComponent],
-			imports: [
-				AppRoutingModule,
-				CoreModule,
-				SiteModule,
-				PopoverModule,
-				ModalModule.forRoot()
-			],
-			providers: [{ provide: ConfigService, useValue: configServiceSpy }]
+			imports: [ModalModule.forRoot(), AppComponent],
+			providers: [
+				{ provide: ConfigService, useValue: configServiceSpy },
+				provideHttpClient(),
+				provideHttpClientTesting()
+			]
 		}).compileComponents();
 	}));
 	it('should create the app', waitForAsync(() => {

src/app/app.component.ts

@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+import { SiteContainerComponent } from './core/site-container/site-container.component';
 
 @Component({
 	selector: 'app-root',
-	templateUrl: './app.component.html'
+	templateUrl: './app.component.html',
+	standalone: true,
+	imports: [SiteContainerComponent, RouterOutlet]
 })
 export class AppComponent {}

src/app/common/admin/admin.component.ts

@@ -1,10 +1,14 @@
+import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
 import { AdminTopic, AdminTopics } from './admin-topic.model';
 
 @Component({
 	templateUrl: 'admin.component.html',
-	styleUrls: ['admin.component.scss']
+	styleUrls: ['admin.component.scss'],
+	standalone: true,
+	imports: [NgFor, RouterLinkActive, RouterLink, RouterOutlet]
 })
 export class AdminComponent {
 	helpTopics: AdminTopic[] = [];

src/app/common/breadcrumb/breadcrumb.component.ts

@@ -1,5 +1,6 @@
+import { NgFor, NgIf } from '@angular/common';
 import { Component, Input } from '@angular/core';
-import { ActivatedRoute, Event, NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, Event, NavigationEnd, Router, RouterLink } from '@angular/router';
 
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { BehaviorSubject, Observable, merge } from 'rxjs';
@@ -11,7 +12,9 @@ import { Breadcrumb, BreadcrumbService } from './breadcrumb.service';
 @Component({
 	selector: 'breadcrumb',
 	templateUrl: 'breadcrumb.component.html',
-	styleUrls: ['breadcrumb.component.scss']
+	styleUrls: ['breadcrumb.component.scss'],
+	standalone: true,
+	imports: [NgFor, NgIf, RouterLink]
 })
 export class BreadcrumbComponent {
 	@Input()

src/app/common/directives/link-accessibility.directive.ts

@@ -7,7 +7,8 @@ import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
  * the tabbing structure.
  */
 @Directive({
-	selector: '[linkAccessibility]'
+	selector: '[linkAccessibility]',
+	standalone: true
 })
 export class LinkAccessibilityDirective {
 	constructor(private elRef: ElementRef, private renderer: Renderer2) {

src/app/common/directives/skip-to.directive.ts

@@ -6,7 +6,8 @@ import { Directive, ElementRef, Renderer2 } from '@angular/core';
  * the h1 element. This directive should only be used once per page
  */
 @Directive({
-	selector: '[skipTo]'
+	selector: '[skipTo]',
+	standalone: true
 })
 export class SkipToDirective {
 	constructor(private elRef: ElementRef, private renderer: Renderer2) {

src/app/common/flyout/flyout.component.ts

@@ -1,9 +1,12 @@
+import { NgClass } from '@angular/common';
 import { Component, ContentChild, ElementRef, Input, Renderer2, ViewChild } from '@angular/core';
 
 @Component({
 	selector: 'app-flyout',
 	templateUrl: './flyout.component.html',
-	styleUrls: ['./flyout.component.scss']
+	styleUrls: ['./flyout.component.scss'],
+	standalone: true,
+	imports: [NgClass]
 })
 export class FlyoutComponent {
 	@ViewChild('flyoutContentContainer') container?: ElementRef;

src/app/common/loading-overlay/loading-overlay.component.spec.ts

@@ -1,6 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LoadingOverlayModule } from '../loading-overlay.module';
 import { LoadingOverlayComponent } from './loading-overlay.component';
 
 describe('LoadingOverlayComponent', () => {
@@ -10,8 +9,7 @@ describe('LoadingOverlayComponent', () => {
 
 	beforeEach(() => {
 		const testbed = TestBed.configureTestingModule({
-			imports: [LoadingOverlayModule],
-			declarations: [LoadingOverlayComponent]
+			imports: [LoadingOverlayComponent]
 		});
 
 		fixture = testbed.createComponent(LoadingOverlayComponent);

src/app/common/loading-overlay/loading-overlay.component.ts

@@ -1,9 +1,15 @@
+import { NgIf } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
+import { LoadingSpinnerComponent } from '../loading-spinner/loading-spinner.component';
+import { NotificationComponent } from '../notification/notification.component';
+
 @Component({
 	selector: 'loading-overlay',
 	templateUrl: 'loading-overlay.component.html',
-	styleUrls: ['loading-overlay.component.scss']
+	styleUrls: ['loading-overlay.component.scss'],
+	standalone: true,
+	imports: [NgIf, NotificationComponent, LoadingSpinnerComponent]
 })
 export class LoadingOverlayComponent {
 	@Input() message = 'Loading...';

src/app/common/loading-spinner/loading-spinner.component.spec.ts

@@ -4,12 +4,16 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { LoadingSpinnerComponent } from './loading-spinner.component';
 
 @Component({
-	template: '<loading-spinner></loading-spinner>'
+	template: '<loading-spinner></loading-spinner>',
+	standalone: true,
+	imports: [LoadingSpinnerComponent]
 })
 export class LoadingSpinnerDefaultTestHostComponent {}
 
 @Component({
-	template: '<loading-spinner [message]="message"></loading-spinner>'
+	template: '<loading-spinner [message]="message"></loading-spinner>',
+	standalone: true,
+	imports: [LoadingSpinnerComponent]
 })
 export class LoadingSpinnerProvidedTestHostComponent {
 	message = 'Bootstrapping...';
@@ -25,8 +29,7 @@ describe('LoadingSpinnerComponent', () => {
 
 	beforeEach(() => {
 		const testbed = TestBed.configureTestingModule({
-			imports: [],
-			declarations: [
+			imports: [
 				LoadingSpinnerDefaultTestHostComponent,
 				LoadingSpinnerProvidedTestHostComponent,
 				LoadingSpinnerComponent

src/app/common/loading-spinner/loading-spinner.component.ts

@@ -3,7 +3,8 @@ import { Component, Input } from '@angular/core';
 @Component({
 	selector: 'loading-spinner',
 	templateUrl: 'loading-spinner.component.html',
-	styleUrls: ['loading-spinner.component.scss']
+	styleUrls: ['loading-spinner.component.scss'],
+	standalone: true
 })
 export class LoadingSpinnerComponent {
 	@Input()

src/app/common/modal/abstract-modal.directive.spec.ts

@@ -11,7 +11,9 @@ import { ModalAction } from './modal.model';
 @UntilDestroy()
 @Component({
 	selector: 'test-modal-component',
-	template: ``
+	template: ``,
+	standalone: true,
+	imports: [A11yModule]
 })
 class ConcreteModalComponent extends AbstractModalDirective {}
 
@@ -21,8 +23,7 @@ describe('Abstract Modal Directive', () => {
 
 	beforeEach(() => {
 		TestBed.configureTestingModule({
-			imports: [A11yModule],
-			declarations: [ConcreteModalComponent],
+			imports: [A11yModule, ConcreteModalComponent],
 			providers: [{ provide: BsModalRef, useValue: {} }]
 		});
 

src/app/common/modal/abstract-modalizable.directive.spec.ts

@@ -8,7 +8,8 @@ import { AbstractModalizableDirective } from './abstract-modalizable.directive';
 @UntilDestroy()
 @Component({
 	selector: 'test-modalized-component',
-	template: ``
+	template: ``,
+	standalone: true
 })
 class ConcreteModalizedComponent extends AbstractModalizableDirective {
 	onCancel() {}
@@ -21,8 +22,7 @@ describe('Abstract Modalized Directive', () => {
 
 	beforeEach(() => {
 		TestBed.configureTestingModule({
-			imports: [],
-			declarations: [ConcreteModalizedComponent]
+			imports: [ConcreteModalizedComponent]
 		});
 
 		fixture = TestBed.createComponent(ConcreteModalizedComponent);

src/app/common/modal/configurable-modal/configurable-modal.component.spec.ts

@@ -13,8 +13,7 @@ describe('Modal Component', () => {
 
 	beforeEach(() => {
 		TestBed.configureTestingModule({
-			imports: [FormsModule],
-			declarations: [ConfigurableModalComponent, ModalComponent],
+			imports: [FormsModule, ConfigurableModalComponent, ModalComponent],
 			providers: [{ provide: BsModalRef, useValue: {} }]
 		});