feat: upgrade to Angular 19

apps/chat/src/app/app-routing.module.ts

@@ -3,11 +3,11 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [
   {
     path: 'groups',
-    loadChildren: () => import('./pages/groups/groups.module').then(m => m.GroupsModule),
+    loadComponent: () => import('./pages/groups/groups.component'),
   },
   {
     path: 'rooms',
-    loadChildren: () => import('./pages/rooms/rooms.module').then(m => m.RoomsModule),
+    loadComponent: () => import('./pages/rooms/rooms.component'),
   },
 ];
 

apps/chat/src/app/app.component.ts

@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
   selector: 'chat-root',
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AppComponent {
   constructor(private router: Router) {}

apps/chat/src/app/pages/groups/groups.component.ts

@@ -6,7 +6,7 @@ import { Router } from '@angular/router';
   templateUrl: './groups.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GroupsComponent {
+export default class GroupsComponent {
   constructor(private router: Router) {}
 
   tryToReproduce113Issue(): void {

apps/chat/src/app/pages/rooms/rooms.component.ts

@@ -5,4 +5,4 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   templateUrl: './rooms.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RoomsComponent {}
+export default class RoomsComponent {}

apps/elements/src/app/app.component.html

@@ -2,21 +2,23 @@
   Lazy load the style that is extracted into a separate file (#187 issue)
 </button>
 
-<p *ngIf="lazyStylesHaveBeenLoaded" class="subtitle is-5 lazy-styles-have-been-loaded">
-  Lazy styles have been loaded
-</p>
+@if (lazyStylesHaveBeenLoaded) {
+  <p class="subtitle is-5 lazy-styles-have-been-loaded">Lazy styles have been loaded</p>
+}
 
 <div class="columns is-multiline users">
-  <div class="column is-one-third" *ngFor="let user of users">
-    <div class="card">
-      <div class="card-content">
-        <p class="title username">
-          {{ user.name }}
-        </p>
-        <p class="subtitle">
-          {{ user.email }}
-        </p>
+  @for (user of users; track user.email) {
+    <div class="column is-one-third">
+      <div class="card">
+        <div class="card-content">
+          <p class="title username">
+            {{ user.name }}
+          </p>
+          <p class="subtitle">
+            {{ user.email }}
+          </p>
+        </div>
       </div>
     </div>
-  </div>
+  }
 </div>

apps/elements/src/app/app.component.ts

@@ -20,13 +20,17 @@ interface User {
   selector: 'elements-root',
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AppComponent implements OnInit, OnDestroy {
   users: User[] = [];
 
   lazyStylesHaveBeenLoaded = false;
 
-  constructor(private ref: ChangeDetectorRef, private http: HttpClient) {}
+  constructor(
+    private ref: ChangeDetectorRef,
+    private http: HttpClient,
+  ) {}
 
   ngOnInit(): void {
     this.http.get<User[]>(assetUrl('/users.json')).subscribe(users => {

apps/navbar/src/app/app.component.ts

@@ -4,5 +4,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   selector: 'navbar-root',
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AppComponent {}

apps/navbar/src/app/app.module.ts

@@ -3,12 +3,11 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { EmptyRouteComponent } from './components/empty-route/empty-route.component';
 import { PrimaryNavComponent } from './components/primary-nav/primary-nav.component';
 
 @NgModule({
-  imports: [BrowserModule, AppRoutingModule],
-  declarations: [AppComponent, EmptyRouteComponent, PrimaryNavComponent],
+  imports: [BrowserModule, AppRoutingModule, PrimaryNavComponent],
+  declarations: [AppComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

apps/navbar/src/app/components/primary-nav/primary-nav.component.html

@@ -6,9 +6,9 @@
   </div>
   <div class="navbar-menu">
     <div class="navbar-start">
-      <a *ngFor="let link of links" class="navbar-item dark-red" (click)="route(link.url)">{{
-        link.label
-      }}</a>
+      @for (link of links; track link.url) {
+        <a class="navbar-item dark-red" (click)="route(link.url)">{{ link.label }}</a>
+      }
     </div>
   </div>
 </nav>

apps/noop-zone/src/app/app-routing.module.ts

@@ -3,11 +3,11 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [
   {
     path: '',
-    loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule),
+    loadComponent: () => import('./pages/home/home.component'),
   },
   {
     path: 'images',
-    loadChildren: () => import('./pages/images/images.module').then(m => m.ImagesModule),
+    loadComponent: () => import('./pages/images/images.component'),
   },
 ];
 

apps/noop-zone/src/app/app.component.ts

@@ -12,6 +12,7 @@ import { Router } from '@angular/router';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AppComponent {
   constructor(public router: Router) {}

apps/noop-zone/src/app/pages/home/home.component.ts

@@ -5,4 +5,4 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HomeComponent {}
+export default class HomeComponent {}

apps/noop-zone/src/app/pages/images/images.component.html

@@ -1,7 +1,11 @@
 <button class="button is-info is-light" (click)="showImages()">Show images</button>
 
-<div *ngIf="imagesShown" class="images">
-  <figure *ngFor="let image of images" class="image is-96x96">
-    <img src="https://bulma.io/images/placeholders/96x96.png" />
-  </figure>
-</div>
+@if (imagesShown) {
+  <div class="images">
+    @for (image of images; track image) {
+      <figure class="image is-96x96">
+        <img src="https://bulma.io/images/placeholders/96x96.png" />
+      </figure>
+    }
+  </div>
+}

apps/noop-zone/src/app/pages/images/images.component.ts

@@ -6,7 +6,7 @@ import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/
   styleUrls: ['./images.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ImagesComponent {
+export default class ImagesComponent {
   images = Array.from({ length: 5 });
 
   imagesShown = false;

apps/parcel/src/app/app.component.ts

@@ -17,6 +17,7 @@ const singleSpa$ = defer(() => System.import('single-spa')).pipe(
   selector: 'parcel-root',
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AppComponent implements OnInit, OnDestroy {
   config = config;

apps/shop/src/app/app-routing.module.ts

@@ -3,15 +3,11 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [
   {
     path: '',
-    loadChildren: () =>
-      import('./pages/transmissions/transmissions.module').then(m => m.TransmissionsModule),
+    loadComponent: () => import('./pages/transmissions/transmissions.component'),
   },
   {
     path: 'transmission/:id',
-    loadChildren: () =>
-      import('./pages/transmission-details/transmission-details.module').then(
-        m => m.TransmissionDetailsModule,
-      ),
+    loadComponent: () => import('./pages/transmission-details/transmission-details.component'),
   },
 ];
 

apps/shop/src/app/app.component.ts

@@ -4,5 +4,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   selector: 'shop-root',
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AppComponent {}

apps/shop/src/app/pages/transmission-details/transmission-details.component.ts

@@ -5,4 +5,4 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   templateUrl: './transmission-details.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TransmissionDetailsComponent {}
+export default class TransmissionDetailsComponent {}

apps/shop/src/app/pages/transmissions/transmissions.component.html

@@ -1,10 +1,15 @@
 <button (click)="showSearchBar()">Show search bar</button>
-<input type="search" *ngIf="searchBarShown" placeholder="Search for transmissions..." />
+
+@if (searchBarShown) {
+  <input type="search" placeholder="Search for transmissions..." />
+}
 
 <hr />
 
 <p>Transmissions</p>
 
-<a *ngFor="let transmission of transmissions" routerLink="/transmission/{{ transmission.id }}">
-  {{ transmission.label }}
-</a>
+@for (transmission of transmissions; track transmission.id) {
+  <a routerLink="/transmission/{{ transmission.id }}">
+    {{ transmission.label }}
+  </a>
+}

apps/shop/src/app/pages/transmissions/transmissions.component.ts

@@ -1,11 +1,13 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'shop-transmissions',
   templateUrl: './transmissions.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink],
 })
-export class TransmissionsComponent {
+export default class TransmissionsComponent {
   transmissions = [
     {
       id: 1,