feat: angular upgrade - 13.3.2 => 14.2.3

workspaces/angular-app/angular.json

@@ -47,7 +47,7 @@
 							"fileReplacements": [
 								{
 									"replace": "src/environments/environment.ts",
-									"with": "src/environments/environment.prod.ts"
+									"with": "src/environments/environment.production.ts"
 								}
 							],
 							"outputHashing": "all"
@@ -128,5 +128,7 @@
 			}
 		}
 	},
-	"defaultProject": "angular-app"
+	"cli": {
+		"analytics": false
+	}
 }

workspaces/angular-app/cypress.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'cypress';
+import configCypress from './cypress/plugins/index';
+
+export default defineConfig({
+	videosFolder: 'cypress/videos',
+	screenshotsFolder: 'cypress/screenshots',
+	fixturesFolder: 'cypress/fixtures',
+	screenshotOnRunFailure: false,
+	video: false,
+	e2e: {
+		// We've imported your old cypress plugins here.
+		// You may want to clean this up later by importing these.
+		setupNodeEvents(on, config) {
+			return configCypress(on, config);
+		},
+		baseUrl: 'http://localhost:4200',
+	},
+});

workspaces/angular-app/cypress.json

@@ -1,11 +0,0 @@
-{
-	"integrationFolder": "cypress/integration",
-	"supportFile": "cypress/support/index.ts",
-	"videosFolder": "cypress/videos",
-	"screenshotsFolder": "cypress/screenshots",
-	"pluginsFile": "cypress/plugins/index.ts",
-	"fixturesFolder": "cypress/fixtures",
-	"baseUrl": "http://localhost:4200",
-	"screenshotOnRunFailure": false,
-	"video": false
-}

workspaces/angular-app/cypress/plugins/index.ts

@@ -1,5 +1,8 @@
 // Plugins enable you to tap into, modify, or extend the internal behavior of Cypress
 // For more info, visit https://on.cypress.io/plugins-api
-module.exports = (_on, _config) => {
+export default (
+	_on: Cypress.PluginEvents,
+	_config: Cypress.PluginConfigOptions
+): void => {
 	// configure plugins here
 };

workspaces/angular-app/cypress/support/commands.ts

@@ -1,23 +1,6 @@
+/// <reference types="cypress" />
 // ***********************************************
-// This example namespace declaration will help
-// with Intellisense and code completion in your
-// IDE or Text Editor.
-// ***********************************************
-// declare namespace Cypress {
-//   interface Chainable<Subject = any> {
-//     customCommand(param: any): typeof customCommand;
-//   }
-// }
-//
-// function customCommand(param: any): void {
-//   console.warn(param);
-// }
-//
-// NOTE: You can use it like so:
-// Cypress.Commands.add('customCommand', customCommand);
-//
-// ***********************************************
-// This example commands.js shows you how to
+// This example commands.ts shows you how to
 // create various custom commands and overwrite
 // existing commands.
 //
@@ -28,16 +11,27 @@
 //
 //
 // -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
+// Cypress.Commands.add('login', (email, password) => { ... })
 //
 //
 // -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
 //
 //
 // -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

workspaces/angular-app/cypress/support/e2e.ts

@@ -1,5 +1,7 @@
+/* eslint-disable unicorn/prevent-abbreviations */
+
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/e2e.ts is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
@@ -13,5 +15,8 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// When a command from ./commands is ready to use, import with `import './commands'` syntax
-// import './commands';
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

workspaces/angular-app/package.json

@@ -10,33 +10,33 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/animations": "~13.3.2",
-		"@angular/common": "~13.3.2",
-		"@angular/compiler": "~13.3.2",
-		"@angular/core": "~13.3.2",
-		"@angular/forms": "~13.3.2",
-		"@angular/platform-browser": "~13.3.2",
-		"@angular/platform-browser-dynamic": "~13.3.2",
-		"@angular/router": "~13.3.2",
+		"@angular/animations": "^14.2.3",
+		"@angular/common": "^14.2.3",
+		"@angular/compiler": "^14.2.3",
+		"@angular/core": "^14.2.3",
+		"@angular/forms": "^14.2.3",
+		"@angular/platform-browser": "^14.2.3",
+		"@angular/platform-browser-dynamic": "^14.2.3",
+		"@angular/router": "^14.2.3",
 		"@ngx-translate/core": "^14.0.0",
 		"@ngx-translate/http-loader": "^7.0.0",
-		"electron": "^18.0.3",
-		"rxjs": "~7.5.5",
-		"tslib": "^2.3.1",
-		"zone.js": "~0.11.5"
+		"electron": "^20.2.0",
+		"rxjs": "~7.5.6",
+		"tslib": "^2.4.0",
+		"zone.js": "~0.11.8"
 	},
 	"devDependencies": {
-		"@angular-devkit/build-angular": "~13.3.2",
-		"@angular/cli": "~13.3.2",
-		"@angular/compiler-cli": "~13.3.2",
-		"@cypress/schematic": "^1.6.0",
-		"@types/node": "^17.0.23",
-		"cypress": "9.5.3",
-		"karma": "~6.3.17",
+		"@angular-devkit/build-angular": "^14.2.3",
+		"@angular/cli": "^14.2.3",
+		"@angular/compiler-cli": "^14.2.3",
+		"@cypress/schematic": "^2.1.1",
+		"@types/node": "^18.7.18",
+		"cypress": "10.8.0",
+		"karma": "~6.4.1",
 		"karma-chrome-launcher": "~3.1.1",
 		"karma-coverage": "~2.2.0",
-		"karma-jasmine": "~4.0.2",
-		"karma-jasmine-html-reporter": "~1.7.0",
-		"typescript": "^4.6.3"
+		"karma-jasmine": "~5.1.0",
+		"karma-jasmine-html-reporter": "~2.0.0",
+		"typescript": "^4.8.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);
+}

workspaces/angular-app/tsconfig.json

@@ -14,7 +14,7 @@
 		"experimentalDecorators": true,
 		"moduleResolution": "node",
 		"importHelpers": true,
-		"target": "es2017",
+		"target": "es2020",
 		"module": "es2020",
 		"lib": ["es2018", "dom"]
 	},