feat: angular upgrade - 13.3.2 => 14.2.3

workspaces/angular-app/src/app/app-routing.module.ts

@@ -1,16 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MutiplesComponent } from './components/mutiples/mutiples.component';
+import { MultiplesComponent } from './components/multiples/multiples.component';
 
 const routes: Routes = [
-  {
-    path: '',
-    component: MutiplesComponent,
-  },
+	{
+		path: '',
+		component: MultiplesComponent,
+	},
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
+	imports: [RouterModule.forRoot(routes)],
+	exports: [RouterModule],
 })
 export class AppRoutingModule {}

workspaces/angular-app/src/app/app.module.ts

@@ -6,7 +6,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { MutiplesComponent } from './components/mutiples/mutiples.component';
+import { MultiplesComponent } from './components/multiples/multiples.component';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -14,7 +14,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
 }
 
 @NgModule({
-	declarations: [AppComponent, MutiplesComponent],
+	declarations: [AppComponent, MultiplesComponent],
 	imports: [
 		BrowserModule,
 		AppRoutingModule,

workspaces/angular-app/src/app/components/multiples/multiples.component.scss

@@ -0,0 +1,23 @@
+#multiples {
+	position: absolute;
+	left: 0;
+	top: 210px;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	color: #ffffff;
+	font-weight: 900;
+
+	.container {
+		background-color: #d47800e0;
+		border-radius: 4px;
+		padding: 20px;
+
+		form {
+			display: flex;
+			> * {
+				margin: 5px;
+			}
+		}
+	}
+}

workspaces/angular-app/src/app/components/multiples/multiples.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { MultiplesComponent } from './multiples.component';
+
+describe('MultiplesComponent', () => {
+	let component: MultiplesComponent;
+	let fixture: ComponentFixture<MultiplesComponent>;
+
+	beforeEach(waitForAsync(() => {
+		TestBed.configureTestingModule({
+			declarations: [MultiplesComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(MultiplesComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

workspaces/angular-app/src/app/components/multiples/multiples.component.ts

@@ -1,17 +1,19 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormControl, UntypedFormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { WindowApiConst } from 'shared-lib';
 import { ElectronIpcService } from '../../services/electron-ipc.service';
 
 @Component({
-	selector: 'app-mutiples',
-	templateUrl: './mutiples.component.html',
-	styleUrls: ['./mutiples.component.scss'],
+	selector: 'app-multiples',
+	templateUrl: './multiples.component.html',
+	styleUrls: ['./multiples.component.scss'],
 })
-export class MutiplesComponent implements OnInit {
-	timesTableForm = new FormGroup({
-		input: new FormControl(Math.round(Math.random() * 100) % 10),
+export class MultiplesComponent implements OnInit {
+	timesTableForm = new UntypedFormGroup({
+		input: new FormControl<number>(Math.round(Math.random() * 100) % 10, {
+			nonNullable: true,
+		}),
 	});
 
 	multiples: number[] = [];

workspaces/angular-app/src/app/components/mutiples/mutiples.component.scss

@@ -1,23 +0,0 @@
-#multiples {
-  position: absolute;
-  left: 0;
-  top: 210px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  color: #ffffff;
-  font-weight: 900;
-
-  .container {
-    background-color: #d47800e0;
-    border-radius: 4px;
-    padding: 20px;
-
-    form {
-      display: flex;
-      > * {
-        margin: 5px;
-      }
-    }
-  }
-}

workspaces/angular-app/src/app/components/mutiples/mutiples.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { MutiplesComponent } from './mutiples.component';
-
-describe('MutiplesComponent', () => {
-  let component: MutiplesComponent;
-  let fixture: ComponentFixture<MutiplesComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MutiplesComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MutiplesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

workspaces/angular-app/src/app/services/electron-ipc.service.ts

@@ -16,7 +16,7 @@ export class ElectronIpcService {
 		}
 	}
 
-	public receive<Out>(channel: string, func: (output: Out) => void): void {
+	public receive<Out>(channel: string, callback: (output: Out) => void): void {
 		if (this._api) {
 			this._api.receive<Out>(channel, (output) => {
 				console.log(`Received from main process channel [${channel}]`, output);
@@ -25,7 +25,7 @@ export class ElectronIpcService {
 				// doesn't recognize it needs to run change detection
 				// Further details on SO : https://stackoverflow.com/a/49136353/11480016
 				this.zone.run(() => {
-					func(output);
+					callback(output);
 				});
 			});
 		}

workspaces/angular-app/src/environments/environment.production.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+	production: true,
 };

workspaces/angular-app/src/environments/environment.ts

@@ -1,9 +1,9 @@
 // This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// `ng build` replaces `environment.ts` with `environment.production.ts`.
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+	production: false,
 };
 
 /*

workspaces/angular-app/src/main.ts

@@ -5,8 +5,10 @@ import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+	.bootstrapModule(AppModule)
+	// eslint-disable-next-line unicorn/prefer-top-level-await
+	.catch((error) => console.error(error));

workspaces/angular-app/src/test.ts

@@ -1,11 +1,11 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
 	BrowserDynamicTestingModule,
 	platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
+import 'zone.js/testing';
 
 declare const require: {
 	context(
@@ -29,4 +29,6 @@ getTestBed().initTestEnvironment(
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.
-context.keys().map(context);
+for (const key of context.keys()) {
+	context(key);
+}