Angular upgrade (#11)

* updated angular to v19.x

* package updates

* added @angular/ssr

* removed unused components

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "npm run build && wrangler pages dev dist/cloudflare --compatibility-date=2024-06-20 --experimental-local",
+    "dev": "ng serve",
     "build:aot": "ng build --aot=true --named-chunks=true --source-map=true && npm run process",
     "build": "ng build && npm run process",
     "watch": "ng build --watch --configuration development",
@@ -15,23 +16,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.5",
-    "@angular/common": "^18.2.5",
-    "@angular/compiler": "^18.2.5",
-    "@angular/core": "^18.2.5",
-    "@angular/forms": "^18.2.5",
-    "@angular/platform-browser": "^18.2.5",
-    "@angular/platform-browser-dynamic": "^18.2.5",
-    "@angular/platform-server": "^18.2.5",
-    "@angular/router": "^18.2.5",
+    "@angular/animations": "^19.0.5",
+    "@angular/common": "^19.0.5",
+    "@angular/compiler": "^19.0.5",
+    "@angular/core": "^19.0.5",
+    "@angular/forms": "^19.0.5",
+    "@angular/platform-browser": "^19.0.5",
+    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/platform-server": "^19.0.5",
+    "@angular/router": "^19.0.5",
+    "@angular/ssr": "^19.0.6",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.5",
-    "@angular/cli": "^18.2.5",
-    "@angular/compiler-cli": "^18.2.5",
+    "@angular-devkit/build-angular": "^19.0.6",
+    "@angular/cli": "^19.0.6",
+    "@angular/compiler-cli": "^19.0.5",
     "@cloudflare/workers-types": "^4.20240620.0",
     "@miniflare/tre": "^3.0.0-next.13",
     "@types/express": "^4.17.17",
@@ -46,7 +48,7 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4",
-    "typescript": "~5.4.2",
+    "typescript": "~5.6.2",
     "wrangler": "^0.0.0-515986d9"
   }
 }

src/app/app.component.ts

@@ -1,26 +1,21 @@
-import { Component, HostBinding, inject, OnInit, signal } from '@angular/core';
+import { Component, inject, OnInit, } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { HeaderComponent } from './header/header.component';
-import { FooterComponent } from './footer/footer.component';
 import { DarkModeService } from './services/dark-mode.service';
 import { CommonModule } from '@angular/common';
 import { KonamiService } from './services/konami.service';
-import { HealthService } from './health.service';
+import { HeaderComponent } from './header/header.component';
+import { FooterComponent } from './footer/footer.component';
 
 @Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [RouterOutlet, HeaderComponent, FooterComponent, CommonModule],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+    selector: 'app-root',
+    imports: [RouterOutlet, CommonModule, HeaderComponent, FooterComponent],
+    standalone: true,
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.css'
 })
-export class AppComponent implements OnInit {
+export class AppComponent{
 
   darkModeService: DarkModeService = inject(DarkModeService);
   konamiService: KonamiService = inject(KonamiService);
-  healthService: HealthService = inject(HealthService);
 
-  ngOnInit() {
-    this.healthService.getHealth().subscribe();
-  }
 }

src/app/contact/contact.component.ts

@@ -1,11 +1,10 @@
 import { isPlatformBrowser } from '@angular/common';
 import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 @Component({
-  selector: 'app-contact',
-  standalone: true,
-  imports: [],
-  templateUrl: './contact.component.html',
-  styleUrl: './contact.component.css',
+    selector: 'app-contact',
+    imports: [],
+    templateUrl: './contact.component.html',
+    styleUrl: './contact.component.css'
 })
 export class ContactComponent implements OnInit {
 

src/app/footer/footer.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-footer',
-  standalone: true,
-  imports: [],
-  templateUrl: './footer.component.html',
-  styleUrl: './footer.component.css'
+    selector: 'app-footer',
+    imports: [],
+    standalone: true,
+    templateUrl: './footer.component.html',
+    styleUrl: './footer.component.css'
 })
 export class FooterComponent {
 

src/app/header/header.component.ts

@@ -1,15 +1,14 @@
-import { NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, HostBinding, inject, OnInit, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { DarkModeService } from '../services/dark-mode.service';
 
 @Component({
-  selector: 'app-header',
-  standalone: true,
-  imports: [RouterModule, NgIf],
-  templateUrl: './header.component.html',
-  styleUrl: './header.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush
+    selector: 'app-header',
+    imports: [RouterModule],
+    standalone: true,
+    templateUrl: './header.component.html',
+    styleUrl: './header.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HeaderComponent {
 

src/app/home/home.component.ts

@@ -1,14 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { HeaderComponent } from '../header/header.component';
-import { FooterComponent } from '../footer/footer.component';
 import { RouterModule } from '@angular/router';
 
 @Component({
-  selector: 'app-home',
-  standalone: true,
-  imports: [HeaderComponent, FooterComponent, RouterModule],
-  templateUrl: './home.component.html',
-  styleUrl: './home.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-home',
+    imports: [RouterModule],
+    standalone: true,
+    templateUrl: './home.component.html',
+    styleUrl: './home.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HomeComponent {}

src/app/modal/modal.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-modal',
-  standalone: true,
-  imports: [],
-  templateUrl: './modal.component.html',
-  styleUrl: './modal.component.css'
+    selector: 'app-modal',
+    imports: [],
+    templateUrl: './modal.component.html',
+    styleUrl: './modal.component.css'
 })
 export class ModalComponent {
 

src/app/not-found/not-found.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-not-found',
-  standalone: true,
-  imports: [],
-  templateUrl: './not-found.component.html',
-  styleUrl: './not-found.component.css'
+    selector: 'app-not-found',
+    imports: [],
+    templateUrl: './not-found.component.html',
+    styleUrl: './not-found.component.css'
 })
 export class NotFoundComponent {
 

src/app/projects/projects.component.ts

@@ -2,15 +2,15 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { HeaderComponent } from '../header/header.component';
 import { FooterComponent } from '../footer/footer.component';
 import { ExperienceService } from '../experience.service';
-import { NgFor, NgOptimizedImage } from '@angular/common';
+import { NgFor, NgForOf, NgOptimizedImage } from '@angular/common';
 
 @Component({
-  selector: 'app-projects',
-  standalone: true,
-  imports: [HeaderComponent, FooterComponent, NgFor, NgOptimizedImage],
-  templateUrl: './projects.component.html',
-  styleUrl: './projects.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-projects',
+    standalone: true,
+    imports: [NgOptimizedImage],
+    templateUrl: './projects.component.html',
+    styleUrl: './projects.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProjectsComponent implements OnInit {
 

src/app/resume/resume.component.ts

@@ -1,15 +1,13 @@
 import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
-import { FooterComponent } from '../footer/footer.component';
-import { HeaderComponent } from '../header/header.component';
 import { ExperienceService } from '../experience.service';
 
 @Component({
-  selector: 'app-resume',
-  standalone: true,
-  imports: [HeaderComponent, FooterComponent, NgFor],
-  templateUrl: './resume.component.html',
-  styleUrl: './resume.component.css'
+    selector: 'app-resume',
+    templateUrl: './resume.component.html',
+    styleUrl: './resume.component.css',
+    standalone: true,
+    imports: [NgFor]
 })
 export class ResumeComponent {