chore(setup): migrate to standalone (#174)

Author: svierk

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Select Node Version
         uses: svierk/get-node-version@main
       - name: Install Dependencies
-        run: npm ci
+        run: npm install --ignore-scripts
       - name: Check Prettier
         run: npm run prettier
       - name: Check ESLint

src/app/app.component.spec.ts

@@ -12,8 +12,7 @@ describe('AppComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
-      declarations: [AppComponent, ToasterComponent],
+      imports: [RouterTestingModule, ToasterComponent, AppComponent],
     }).compileComponents();
   });
 

src/app/app.component.ts

@@ -1,12 +1,14 @@
 import { Component, inject } from '@angular/core';
 import { EventTypes } from './models/event-types';
 import { ToastService } from './services/toast.service';
+import { ToasterComponent } from './components/toaster/toaster.component';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  standalone: false,
+  imports: [ToasterComponent, RouterOutlet],
 })
 export class AppComponent {
   readonly toastService = inject(ToastService);

src/app/app.module.ts

@@ -10,7 +10,7 @@ describe('ToastComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ToastComponent],
+      imports: [ToastComponent],
     }).compileComponents();
   });
 

src/app/components/toast/toast.component.spec.ts

@@ -3,12 +3,13 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild }
 import { Toast } from 'bootstrap';
 import { fromEvent, take } from 'rxjs';
 import { EventTypes } from 'src/app/models/event-types';
+import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'app-toast',
   templateUrl: './toast.component.html',
   styleUrls: ['./toast.component.scss'],
-  standalone: false,
+  imports: [NgClass],
 })
 export class ToastComponent implements OnInit {
   @Output() disposeEvent = new EventEmitter();

src/app/components/toast/toast.component.ts

@@ -8,7 +8,7 @@ describe('ToasterComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ToasterComponent],
+      imports: [ToasterComponent],
     }).compileComponents();
   });
 

src/app/components/toaster/toaster.component.spec.ts

@@ -1,13 +1,14 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, inject } from '@angular/core';
 import { ToastEvent } from 'src/app/models/toast-event';
 import { ToastService } from 'src/app/services/toast.service';
+import { ToastComponent } from '../toast/toast.component';
 
 @Component({
   selector: 'app-toaster',
   templateUrl: './toaster.component.html',
   styleUrls: ['./toaster.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [ToastComponent],
 })
 export class ToasterComponent implements OnInit {
   readonly toastService = inject(ToastService);

src/app/components/toaster/toaster.component.ts

@@ -1,13 +1,17 @@
-import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+
+import { MatIconModule } from '@angular/material/icon';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { AppRoutingModule } from './app/app-routing.module';
+import { AppComponent } from './app/app.component';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule, { applicationProviders: [provideZoneChangeDetection()] })
+bootstrapApplication(AppComponent, {
+  providers: [importProvidersFrom(BrowserModule, AppRoutingModule, MatIconModule)],
+})
   // eslint-disable-next-line no-console
   .catch((err) => console.error(err));