Upgrade to Angular 19

Author: robinsonzimmermann

package-lock.json

@@ -23,36 +23,38 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.6",
-    "@angular/cdk": "^18.2.6",
-    "@angular/common": "^18.2.6",
-    "@angular/compiler": "^18.2.6",
-    "@angular/core": "^18.2.6",
-    "@angular/forms": "^18.2.6",
-    "@angular/material": "^18.2.6",
-    "@angular/platform-browser": "^18.2.6",
-    "@angular/platform-browser-dynamic": "^18.2.6",
-    "@angular/platform-server": "^18.2.6",
-    "@angular/router": "^18.2.6",
-    "@angular/ssr": "^18.2.6",
+    "@angular/animations": "^19.2.15",
+    "@angular/cdk": "^19.2.19",
+    "@angular/common": "^19.2.15",
+    "@angular/compiler": "^19.2.15",
+    "@angular/core": "^19.2.15",
+    "@angular/forms": "^19.2.15",
+    "@angular/material": "^19.2.19",
+    "@angular/platform-browser": "^19.2.15",
+    "@angular/platform-browser-dynamic": "^19.2.15",
+    "@angular/platform-server": "^19.2.15",
+    "@angular/router": "^19.2.15",
+    "@angular/ssr": "^19.2.17",
     "@opentelemetry/api": "^1.8.0",
     "@opentelemetry/auto-instrumentations-web": "^0.51.0",
     "@opentelemetry/context-zone-peer-dep": "^2.1.0",
     "@opentelemetry/exporter-trace-otlp-http": "^0.205.0",
     "@opentelemetry/instrumentation": "^0.205.0",
     "@opentelemetry/instrumentation-user-interaction": "^0.50.0",
+    "@opentelemetry/resources": "^2.1.0",
     "@opentelemetry/sdk-trace-web": "^2.1.0",
+    "@opentelemetry/semantic-conventions": "^1.37.0",
     "express": "^4.21.0",
-    "ngx-markdown": "^18.0.0",
+    "ngx-markdown": "^19.1.1",
     "prismjs": "^1.29.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.6",
-    "@angular/cli": "^18.2.6",
-    "@angular/compiler-cli": "^18.2.6",
+    "@angular-devkit/build-angular": "^19.2.17",
+    "@angular/cli": "^19.2.17",
+    "@angular/compiler-cli": "^19.2.15",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
@@ -66,8 +68,8 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "lint-staged": "^15.2.0",
-    "marked": "^9.0.0",
-    "ng-packagr": "^18.1.0",
+    "marked": "^15.0.12",
+    "ng-packagr": "^19.2.2",
     "prettier": "^3.2.4",
     "reading-time-estimator": "^1.9.2",
     "typescript": "~5.5.3"

package.json

@@ -1,5 +1,5 @@
 import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr';
+import { CommonEngine } from '@angular/ssr/node';
 import express from 'express';
 import { fileURLToPath } from 'node:url';
 import { dirname, join, resolve } from 'node:path';

server.ts

@@ -4,15 +4,14 @@ import { NavigationComponent } from './core/layout/navigation/navigation.compone
 import { FooterComponent } from './core/layout/footer/footer.component';
 
 @Component({
-  selector: 'blog-root',
-  standalone: true,
-  imports: [
-    NavigationComponent,
-    FooterComponent,
-    RouterOutlet
-  ],
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+    selector: 'blog-root',
+    imports: [
+        NavigationComponent,
+        FooterComponent,
+        RouterOutlet
+    ],
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = 'blog';

src/app/app.component.ts

@@ -6,11 +6,10 @@ import { ImageSize } from '../../core/model/content.model';
 import { AvatarComponent } from '../avatar/avatar.component';
 
 @Component({
-  selector: 'blog-author',
-  standalone: true,
-  imports: [NgStyle, NgClass, RouterLink, AvatarComponent],
-  templateUrl: './author.component.html',
-  styleUrl: './author.component.scss',
+    selector: 'blog-author',
+    imports: [NgStyle, NgClass, RouterLink, AvatarComponent],
+    templateUrl: './author.component.html',
+    styleUrl: './author.component.scss'
 })
 export class AuthorComponent {
   @Input('author') set _author(value: Author | string) {

src/app/components/author/author.component.ts

@@ -2,11 +2,10 @@ import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular
 import { NgClass } from '@angular/common';
 
 @Component({
-  selector: 'blog-avatar',
-  standalone: true,
-  imports: [NgClass],
-  templateUrl: './avatar.component.html',
-  styleUrl: './avatar.component.scss',
+    selector: 'blog-avatar',
+    imports: [NgClass],
+    templateUrl: './avatar.component.html',
+    styleUrl: './avatar.component.scss'
 })
 export class AvatarComponent implements AfterViewInit {
 

src/app/components/avatar/avatar.component.ts

@@ -2,11 +2,10 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
-  selector: 'blog-button',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './button.component.html',
-  styleUrl: './button.component.scss',
-  encapsulation: ViewEncapsulation.None,
+    selector: 'blog-button',
+    imports: [CommonModule],
+    templateUrl: './button.component.html',
+    styleUrl: './button.component.scss',
+    encapsulation: ViewEncapsulation.None
 })
 export class ButtonComponent {}

src/app/components/button/button.component.ts

@@ -4,11 +4,10 @@ import { MatTabChangeEvent, MatTabsModule } from '@angular/material/tabs';
 import { Category } from '../../core/model/categories.model';
 
 @Component({
-  selector: 'blog-categories',
-  standalone: true,
-  imports: [CommonModule, MatTabsModule],
-  templateUrl: './categories.component.html',
-  styleUrl: './categories.component.scss',
+    selector: 'blog-categories',
+    imports: [CommonModule, MatTabsModule],
+    templateUrl: './categories.component.html',
+    styleUrl: './categories.component.scss'
 })
 export class CategoriesComponent {
   @Input() categories!: Category[];

src/app/components/categories/categories.component.ts

@@ -2,11 +2,10 @@ import { Component, Input } from '@angular/core';
 import { Category } from '../../core/model/categories.model';
 
 @Component({
-  selector: 'blog-category-title',
-  standalone: true,
-  imports: [],
-  templateUrl: './category-title.component.html',
-  styleUrl: './category-title.component.scss',
+    selector: 'blog-category-title',
+    imports: [],
+    templateUrl: './category-title.component.html',
+    styleUrl: './category-title.component.scss'
 })
 export class CategoryTitleComponent {
   @Input() section!: string | null;

src/app/components/category-title/category-title.component.ts

@@ -2,10 +2,9 @@ import { Component } from '@angular/core';
 import { MatDividerModule } from '@angular/material/divider';
 
 @Component({
-  selector: 'blog-divider',
-  standalone: true,
-  imports: [MatDividerModule],
-  templateUrl: './divider.component.html',
-  styleUrl: './divider.component.scss',
+    selector: 'blog-divider',
+    imports: [MatDividerModule],
+    templateUrl: './divider.component.html',
+    styleUrl: './divider.component.scss'
 })
 export class DividerComponent {}