Upgrade to Angular 15

package.json

@@ -17,14 +17,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.6",
-    "@angular/common": "^14.2.6",
-    "@angular/compiler": "^14.2.6",
-    "@angular/core": "^14.2.6",
-    "@angular/forms": "^14.2.6",
-    "@angular/platform-browser": "^14.2.6",
-    "@angular/platform-browser-dynamic": "^14.2.6",
-    "@angular/router": "^14.2.6",
+    "@angular/animations": "^15.0.0",
+    "@angular/common": "^15.0.0",
+    "@angular/compiler": "^15.0.0",
+    "@angular/core": "^15.0.0",
+    "@angular/forms": "^15.0.0",
+    "@angular/platform-browser": "^15.0.0",
+    "@angular/platform-browser-dynamic": "^15.0.0",
+    "@angular/router": "^15.0.0",
     "@ngx-loading-bar/core": "^4.2.0",
     "@ngx-loading-bar/http-client": "^4.2.0",
     "@ngx-loading-bar/router": "^4.2.0",
@@ -41,10 +41,10 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.6",
-    "@angular/cli": "^14.2.6",
-    "@angular/compiler-cli": "^14.2.6",
-    "@angular/language-service": "^14.2.6",
+    "@angular-devkit/build-angular": "^15.0.0",
+    "@angular/cli": "^15.0.0",
+    "@angular/compiler-cli": "^15.0.0",
+    "@angular/language-service": "^15.0.0",
     "@gammastream/scully-plugin-sitemap": "^1.0.7",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.4.0",
@@ -72,4 +72,4 @@
     "tslint": "~6.1.0",
     "typescript": "~4.8.4"
   }
-}
+}

src/app/app-routing.module.ts

@@ -26,7 +26,7 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes, { relativeLinkResolution: 'legacy' }),
+    RouterModule.forRoot(appRoutes, {}),
   ],
   exports: [RouterModule],
 })

src/app/components/codetip-box/codetip-box.component.ts

@@ -3,12 +3,12 @@ import CodeTip from 'src/app/models/codetip';
 import { transition, trigger, useAnimation } from '@angular/animations';
 import { loadAnimation } from '../../animations/loadAnimation';
 import { CommonModule } from '@angular/common';
-import { RouterLinkWithHref } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-codetip-box',
   standalone: true,
-  imports: [CommonModule, RouterLinkWithHref],
+  imports: [CommonModule, RouterLink],
   animations: [
     trigger('loadingAnimation', [
       transition(':enter', [useAnimation(loadAnimation)]),
@@ -17,7 +17,7 @@ import { RouterLinkWithHref } from '@angular/router';
   template: `
     <div @loadingAnimation *ngIf="codeTip" class="relative bg-gray-800 my-8">
       <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2">
-        <img class="w-full h-full object-cover" [src]="image" />
+        <img class="w-full h-full object-cover" [src]="image" alt="Code Tip" />
       </div>
       <div
         class="relative max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-16"

src/app/components/menu/menu-item/menu-item.component.ts

@@ -2,12 +2,12 @@ import { Component, OnInit, Input } from '@angular/core';
 import Page from 'src/app/models/page';
 import { IconService } from 'src/app/services/icon.service';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { RouterLinkWithHref } from '@angular/router';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
   selector: 'app-menu-item',
   standalone: true,
-  imports: [RouterLinkWithHref],
+  imports: [RouterLink, RouterLinkActive],
   template: `
     <a
       [routerLink]="page.link"

src/app/components/post-box/post-box.component.ts

@@ -1,16 +1,15 @@
 import { Component, OnInit, Input } from '@angular/core';
 import Post from 'src/app/models/post';
-import { PostService } from 'src/app/services/post.service';
 import { transition, trigger, useAnimation } from '@angular/animations';
 import { loadAnimation } from 'src/app/animations/loadAnimation';
 import { CommonModule } from '@angular/common';
 import { TagsListComponent } from '../tags-list/tags-list.component';
-import { RouterLinkWithHref } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-post-box',
   standalone: true,
-  imports: [CommonModule, TagsListComponent, RouterLinkWithHref],
+  imports: [CommonModule, TagsListComponent, RouterLink],
   animations: [
     trigger('loadingAnimation', [
       transition(':enter', [useAnimation(loadAnimation)]),
@@ -19,7 +18,7 @@ import { RouterLinkWithHref } from '@angular/router';
   template: `
     <div @loadingAnimation *ngIf="post" class="relative bg-gray-800 my-8">
       <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2">
-        <img class="w-full h-full object-cover" [src]="postImage" />
+        <img class="w-full h-full object-cover" [src]="postImage" alt="Post Image" />
       </div>
       <div
         class="relative max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-16"
@@ -69,8 +68,6 @@ export class PostBoxComponent implements OnInit {
   @Input() post: Post;
   @Input() highlightedTag: string;
 
-  constructor(private postService: PostService) {}
-
   ngOnInit(): void {}
 
   get postLink() {

src/app/components/search-results/search-results.component.ts

@@ -8,14 +8,14 @@ import {
 import { SearchService } from 'src/app/services/search.service';
 import Post from 'src/app/models/post';
 import { mergeMap, Observable, toArray } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { CommonModule, DatePipe } from '@angular/common';
-import { RouterLinkWithHref } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-search-results',
   standalone: true,
-  imports: [CommonModule, RouterLinkWithHref, DatePipe],
+  imports: [CommonModule, RouterLink, DatePipe],
   template: `
     <div class="absolute inset-x-0 z-20">
       <div class="bg-white shadow overflow-hidden">

src/app/components/tags-list/tags-list.component.ts

@@ -1,12 +1,12 @@
 import { Component, OnInit, Input } from '@angular/core';
 import Post from 'src/app/models/post';
 import { CommonModule } from '@angular/common';
-import { RouterLinkWithHref } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-tags-list',
   standalone: true,
-  imports: [CommonModule, RouterLinkWithHref],
+  imports: [CommonModule, RouterLink],
   template: `
     <div class="shrink-0 flex">
       <a

src/app/custom-pages/home/home.component.ts

@@ -1,12 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { PortfolioService } from 'src/app/services/portfolio.service';
 import { PageHeadService } from '../../services/page-head.service';
-import { RouterLinkWithHref } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [RouterLinkWithHref],
+  imports: [RouterLink],
   template: `
     <div class="">
       <div

src/test.ts

@@ -7,14 +7,8 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting()
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

tsconfig.json

@@ -10,7 +10,7 @@
     "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2020",
+    "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
@@ -19,7 +19,8 @@
       "dom"
     ],
     "resolveJsonModule": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,