Angular 19 upgrade

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve day30-whack-a-mole-standalone",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
@@ -12,22 +12,22 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.1.3",
-    "@angular/common": "^15.1.3",
-    "@angular/compiler": "^15.1.3",
-    "@angular/core": "^15.1.3",
-    "@angular/forms": "^15.1.3",
-    "@angular/platform-browser": "^15.1.3",
-    "@angular/platform-browser-dynamic": "^15.1.3",
-    "@angular/router": "^15.1.3",
+    "@angular/animations": "^19.0.1",
+    "@angular/common": "^19.0.1",
+    "@angular/compiler": "^19.0.1",
+    "@angular/core": "^19.0.1",
+    "@angular/forms": "^19.0.1",
+    "@angular/platform-browser": "^19.0.1",
+    "@angular/platform-browser-dynamic": "^19.0.1",
+    "@angular/router": "^19.0.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.1.4",
-    "@angular/cli": "^15.1.4",
-    "@angular/compiler-cli": "^15.1.3",
+    "@angular-devkit/build-angular": "^19.0.2",
+    "@angular/cli": "^19.0.2",
+    "@angular/compiler-cli": "^19.0.1",
     "@types/jasmine": "~3.10.0",
     "@types/node": "16.18.6",
     "jasmine-core": "~4.0.0",
@@ -37,6 +37,6 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
     "prettier": "2.8.4",
-    "typescript": "4.9.5"
+    "typescript": "5.6.3"
   }
 }

projects/day1-javascript-drum-kit/src/app/app.component.ts

@@ -3,18 +3,17 @@ import { Title } from '@angular/platform-browser';
 import { DrumComponent } from './drum';
 
 @Component({
-  selector: 'app-root',
-  imports: [DrumComponent],
-  template: '<app-drum></app-drum>',
-  styles: [
-    `
+    selector: 'app-root',
+    imports: [DrumComponent],
+    template: '<app-drum></app-drum>',
+    styles: [
+        `
       :host {
         display: block;
         height: 100vh;
       }
     `,
-  ],
-  standalone: true,
+    ]
 })
 export class AppComponent {
   title = 'RxJS Drum Kit';

projects/day1-javascript-drum-kit/src/app/drum/drum.component.ts

@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 import { filter, fromEvent, map } from 'rxjs';
 import { WINDOW } from '../core/services';
-import { DrumKeyComponent } from '../drum-key/drum-key.component';
+import { DrumKeyComponent } from '../drum-key';
 import { getFullAssetPath, getHostNativeElement } from '../helpers';
 import { DrumService } from '../services';
 
@@ -36,10 +36,9 @@ const windowKeydownSubscription = () => {
 };
 
 @Component({
-  imports: [NgFor, DrumKeyComponent],
-  standalone: true,
-  selector: 'app-drum',
-  template: `
+    imports: [NgFor, DrumKeyComponent],
+    selector: 'app-drum',
+    template: `
     <div class="keys">
       <app-drum-key
         *ngFor="let entry of entries"
@@ -48,8 +47,8 @@ const windowKeydownSubscription = () => {
       ></app-drum-key>
     </div>
   `,
-  styles: [
-    `
+    styles: [
+        `
       :host {
         display: flex;
         justify-content: center;
@@ -71,8 +70,8 @@ const windowKeydownSubscription = () => {
         }
       }
     `,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DrumComponent implements OnInit, OnDestroy {
   entries = getEntryStore().entries;

projects/day10-hold-shift-and-check-checkboxes/src/app/app.component.ts

@@ -3,17 +3,16 @@ import { Title } from '@angular/platform-browser';
 import { InboxComponent } from './inbox/inbox/inbox.component';
 
 @Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [InboxComponent],
-  template: '<app-inbox></app-inbox>',
-  styles: [
-    `
+    selector: 'app-root',
+    imports: [InboxComponent],
+    template: '<app-inbox></app-inbox>',
+    styles: [
+        `
       :host {
         display: block;
       }
     `,
-  ],
+    ]
 })
 export class AppComponent {
   title = 'Day 10 Hold shift key and check checkboxes';

projects/day10-hold-shift-and-check-checkboxes/src/app/inbox/inbox/inbox.component.ts

@@ -10,10 +10,9 @@ import { CheckboxClickState, Message } from '../interfaces';
 import { messageStore } from './message.store';
 
 @Component({
-  selector: 'app-inbox',
-  standalone: true,
-  imports: [InboxItemComponent, NgIf, NgFor, AsyncPipe],
-  template: `
+    selector: 'app-inbox',
+    imports: [InboxItemComponent, NgIf, NgFor, AsyncPipe],
+    template: `
     <div class="inbox" *ngIf="messages$ | async as messages">
       <app-inbox-item
         *ngFor="let message of messages; index as i; last as isLast"
@@ -24,8 +23,8 @@ import { messageStore } from './message.store';
       </app-inbox-item>
     </div>
   `,
-  styles: [
-    `
+    styles: [
+        `
       :host {
         display: block;
       }
@@ -38,8 +37,8 @@ import { messageStore } from './message.store';
         box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
       }
     `,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class InboxComponent {
   @ViewChildren(InboxItemComponent)

projects/day11-custom-video-player/src/app/app.component.ts

@@ -2,15 +2,16 @@ import { Component } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 
 @Component({
-  selector: 'app-root',
-  template: '<app-video-player></app-video-player>',
-  styles: [
-    `
+    selector: 'app-root',
+    template: '<app-video-player></app-video-player>',
+    styles: [
+        `
       :host {
         display: block;
       }
     `,
-  ],
+    ],
+    standalone: false
 })
 export class AppComponent {
   title = 'Day11 HTML Video Player';

projects/day11-custom-video-player/src/app/video-player/video-player-controls/video-player-controls.component.ts

@@ -15,8 +15,8 @@ import { VideoAction } from '../interfaces';
 import { VideoPlayerService } from '../services';
 
 @Component({
-  selector: 'app-video-player-controls',
-  template: `
+    selector: 'app-video-player-controls',
+    template: `
     <div class="player__controls">
       <div class="progress" #progress>
         <div
@@ -33,8 +33,9 @@ import { VideoPlayerService } from '../services';
       <button data-skip="25" class="player__button" #skip>25s »</button>
     </div>
   `,
-  styleUrls: ['./video-player-controls.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrls: ['./video-player-controls.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
 })
 export class VideoPlayerControlsComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild('toggle', { static: true })

projects/day11-custom-video-player/src/app/video-player/video-player/video-player.component.ts

@@ -14,17 +14,17 @@ import { VideoAction, VideoPlayerRangeInput } from '../interfaces';
 import { VideoPlayerService } from '../services';
 
 @Component({
-  selector: 'app-video-player',
-  template: `
+    selector: 'app-video-player',
+    template: `
     <div class="player">
       <video class="player__video viewer" currentTime="10" #video>
         <source [src]="videoSrc" type="video/mp4" />
       </video>
       <app-video-player-controls></app-video-player-controls>
     </div>
   `,
-  styles: [
-    `
+    styles: [
+        `
       :host {
         display: flex;
         background: #7a419b;
@@ -59,8 +59,9 @@ import { VideoPlayerService } from '../services';
         width: 100%;
       }
     `,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
 })
 export class VideoPlayerComponent implements OnInit, OnDestroy {
   @ViewChild('video', { static: true })

projects/day12-key-sequence-detection/src/app/app.component.ts

@@ -2,15 +2,16 @@ import { Component } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 
 @Component({
-  selector: 'app-root',
-  template: '<app-key-sequence-detection></app-key-sequence-detection>',
-  styles: [
-    `
+    selector: 'app-root',
+    template: '<app-key-sequence-detection></app-key-sequence-detection>',
+    styles: [
+        `
       :host {
         display: block;
       }
     `,
-  ],
+    ],
+    standalone: false
 })
 export class AppComponent {
   title = 'Day12 Key Sequence Detection';

projects/day12-key-sequence-detection/src/app/key-sequence-detection/key-sequence-detection/key-sequence-detection.component.ts

@@ -12,16 +12,17 @@ import { WINDOW } from '../../core';
 declare var cornify_add: any;
 
 @Component({
-  selector: 'app-key-sequence-detection',
-  template: ` <div><p>Type the secret code to display unicorn(s)!</p></div> `,
-  styles: [
-    `
+    selector: 'app-key-sequence-detection',
+    template: ` <div><p>Type the secret code to display unicorn(s)!</p></div> `,
+    styles: [
+        `
       :host {
         display: block;
       }
     `,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
 })
 export class KeySequenceDetectionComponent implements OnInit, OnDestroy {
   readonly secretCode = 'wesbos';

projects/day13-slide-in-on-scroll/src/app/app.component.ts

@@ -2,15 +2,16 @@ import { Component } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 
 @Component({
-  selector: 'app-root',
-  template: '<app-scroll></app-scroll>',
-  styles: [
-    `
+    selector: 'app-root',
+    template: '<app-scroll></app-scroll>',
+    styles: [
+        `
       :host {
         display: block;
       }
     `,
-  ],
+    ],
+    standalone: false
 })
 export class AppComponent {
   title = 'Day 13 Slide in on Scroll';

projects/day13-slide-in-on-scroll/src/app/scroll/scroll/scroll.component.ts

@@ -10,10 +10,10 @@ import { debounceTime, fromEvent, map, startWith } from 'rxjs';
 import { WINDOW } from '../../core';
 
 @Component({
-  selector: 'app-scroll',
-  templateUrl: './scroll.component.html',
-  styles: [
-    `
+    selector: 'app-scroll',
+    templateUrl: './scroll.component.html',
+    styles: [
+        `
       :host {
         display: block;
       }
@@ -54,8 +54,9 @@ import { WINDOW } from '../../core';
         }
       }
     `,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
 })
 export class ScrollComponent {
   @ViewChildren('img')

projects/day15-local-storage/src/app/app.component.ts

@@ -3,8 +3,8 @@ import { Component, ElementRef, Inject } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 
 @Component({
-  selector: 'app-root',
-  template: `
+    selector: 'app-root',
+    template: `
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -36,8 +36,8 @@ import { Title } from '@angular/platform-browser';
     </svg>
     <app-list-container></app-list-container>
   `,
-  styles: [
-    `
+    styles: [
+        `
       :host {
         min-height: 100vh;
         display: flex;
@@ -59,7 +59,8 @@ import { Title } from '@angular/platform-browser';
         margin-bottom: 50px;
       }
     `,
-  ],
+    ],
+    standalone: false
 })
 export class AppComponent {
   title = 'Day15 LocalStorage';