refactor: update to new Angular v19 features (#1603)

Author: JeevanMahesha

apps/analog-app/src/app/app.component.ts

@@ -8,9 +8,8 @@ import { TopBarComponent } from '@analogjs/top-bar';
   imports: [TopBarComponent, RouterOutlet],
   template: `
     <analogjs-top-bar />
-
     <div class="container">
-      <router-outlet></router-outlet>
+      <router-outlet />
     </div>
   `,
 })

apps/analog-app/src/app/cart.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import type { Product } from './products';
 
@@ -8,7 +8,7 @@ import type { Product } from './products';
 export class CartService {
   items: Product[] = [];
 
-  constructor(private http: HttpClient) {}
+  private readonly http = inject(HttpClient);
 
   addToCart(product: Product) {
     this.items.push(product);

apps/analog-app/src/app/pages/(home).page.ts

@@ -1,7 +1,6 @@
+import { RouteMeta, injectLoad } from '@analogjs/router';
 import { Component } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { RouteMeta, injectLoad } from '@analogjs/router';
-import { NgForOf, NgIf } from '@angular/common';
 import { RouterLinkWithHref } from '@angular/router';
 
 import { ProductAlertsComponent } from '../product-alerts/product-alerts.component';
@@ -13,12 +12,12 @@ export const routeMeta: RouteMeta = {
 
 @Component({
   selector: 'app-product-list',
-  standalone: true,
-  imports: [NgForOf, NgIf, ProductAlertsComponent, RouterLinkWithHref],
+  imports: [ProductAlertsComponent, RouterLinkWithHref],
   template: `
     <h2>Products</h2>
 
-    <div *ngFor="let product of data().products">
+    @for (product of data().products; track product.id) {
+    <div>
       <h3>
         <a
           [title]="product.name + ' details'"
@@ -27,14 +26,13 @@ export const routeMeta: RouteMeta = {
           {{ product.name }}
         </a>
       </h3>
-
-      <p *ngIf="product.description">Description: {{ product.description }}</p>
-
+      @if ( product.description ) {
+      <p>Description: {{ product.description }}</p>
+      }
       <button type="button" (click)="share()">Share</button>
-
-      <app-product-alerts [product]="product" (notify)="onNotify()">
-      </app-product-alerts>
+      <app-product-alerts [product]="product" (notify)="onNotify()" />
     </div>
+    }
   `,
   styles: [
     `

apps/analog-app/src/app/pages/[...slug].page.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-page-not-found',
-  standalone: true,
   template: ` <h2>Page Not Found</h2> `,
 })
 export default class PageNotFoundComponent {}

apps/analog-app/src/app/pages/cart.page.ts

@@ -1,4 +1,4 @@
-import { CurrencyPipe, NgForOf } from '@angular/common';
+import { CurrencyPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { RouterLinkWithHref } from '@angular/router';
@@ -7,19 +7,21 @@ import { CartService } from '../cart.service';
 
 @Component({
   selector: 'app-cart',
-  standalone: true,
-  imports: [RouterLinkWithHref, NgForOf, CurrencyPipe, ReactiveFormsModule],
+  imports: [RouterLinkWithHref, CurrencyPipe, ReactiveFormsModule],
   template: `
     <h3>Cart</h3>
 
     <p>
       <a routerLink="/shipping">Shipping Prices</a>
     </p>
 
-    <div class="cart-item" *ngFor="let item of items">
+    @for (item of items; track $index) {
+
+    <div class="cart-item">
       <span>{{ item.name }} </span>
       <span>{{ item.price | currency }}</span>
     </div>
+    }
 
     <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
       <div>
@@ -37,8 +39,8 @@ import { CartService } from '../cart.service';
   `,
 })
 export default class CartComponent {
-  private cartService = inject(CartService);
-  private formBuilder = inject(FormBuilder);
+  private readonly cartService = inject(CartService);
+  private readonly formBuilder = inject(FormBuilder);
 
   items = this.cartService.getItems();
 

apps/analog-app/src/app/pages/client/(client).page.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ServerOnly } from '@analogjs/router';
 
 @Component({
-  standalone: true,
   imports: [ServerOnly],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `

apps/analog-app/src/app/pages/products.[productId].page.ts

@@ -1,31 +1,33 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { CurrencyPipe, NgIf } from '@angular/common';
 import { injectActivatedRoute } from '@analogjs/router';
+import { CurrencyPipe } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
+import { Component, inject, OnInit } from '@angular/core';
 import { catchError, of } from 'rxjs';
 
-import { Product } from '../products';
 import { CartService } from '../cart.service';
+import { Product } from '../products';
 
 @Component({
   selector: 'app-product-details',
-  standalone: true,
-  imports: [NgIf, CurrencyPipe],
+  imports: [CurrencyPipe],
   template: `
     <h2>Product Details</h2>
 
-    <div *ngIf="product">
+    @if ( product ) {
+
+    <div>
       <h3>{{ product.name }}</h3>
       <h4>{{ product.price | currency }}</h4>
       <p>{{ product.description }}</p>
       <button type="button" (click)="addToCart(product)">Buy</button>
     </div>
+    }
   `,
 })
 export default class ProductDetailsComponent implements OnInit {
-  private route = injectActivatedRoute();
-  private cartService = inject(CartService);
-  private http = inject(HttpClient);
+  private readonly route = injectActivatedRoute();
+  private readonly cartService = inject(CartService);
+  private readonly http = inject(HttpClient);
 
   product: Product | undefined;
 

apps/analog-app/src/app/pages/search.page.ts

@@ -6,7 +6,6 @@ import type { load } from './search.server';
 
 @Component({
   selector: 'app-search-page',
-  standalone: true,
   imports: [FormAction],
   template: `
     <h3>Search</h3>

apps/analog-app/src/app/pages/shipping/[...slug].page.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-shipping-page-not-found',
-  standalone: true,
   template: ` <h2>Shipping Page Not Found</h2> `,
 })
 export default class ShippingPageNotFoundComponent {}

apps/analog-app/src/app/pages/shipping/index.page.ts

@@ -1,22 +1,16 @@
-import { AsyncPipe, CurrencyPipe, NgForOf } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { AsyncPipe, CurrencyPipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
 
-import { Observable } from 'rxjs';
 import { CartService } from '../../cart.service';
 
 @Component({
   selector: 'app-shipping',
-  standalone: true,
-  imports: [NgForOf, CurrencyPipe, AsyncPipe],
+  imports: [CurrencyPipe, AsyncPipe],
   templateUrl: './shipping.html',
   styleUrls: ['./shipping.scss'],
 })
-export default class ShippingComponent implements OnInit {
-  private cartService = inject(CartService);
+export default class ShippingComponent {
+  private readonly cartService = inject(CartService);
 
-  shippingCosts!: Observable<{ type: string; price: number }[]>;
-
-  ngOnInit(): void {
-    this.shippingCosts = this.cartService.getShippingPrices();
-  }
+  shippingCosts = this.cartService.getShippingPrices();
 }

apps/analog-app/src/app/pages/shipping/shipping.html

@@ -1,6 +1,7 @@
 <h3>Shipping Prices</h3>
-
-<div class="shipping-item" *ngFor="let shipping of shippingCosts | async">
+@for (shipping of shippingCosts | async; track $index) {
+<div class="shipping-item">
   <span>{{ shipping.type }}</span>
   <span>{{ shipping.price | currency }}</span>
 </div>
+}

apps/analog-app/src/app/product-alerts/product-alerts.component.ts

@@ -1,18 +1,17 @@
-import { NgIf } from '@angular/common';
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 import { Product } from '../products';
 
 @Component({
   selector: 'app-product-alerts',
-  standalone: true,
-  imports: [NgIf],
   template: `
-    <p *ngIf="product && product.price > 700">
+    @if ( product() && product()!.price > 700 ) {
+    <p>
       <button type="button" (click)="notify.emit()">Notify Me</button>
     </p>
+    }
   `,
 })
 export class ProductAlertsComponent {
-  @Input() product: Product | undefined;
-  @Output() notify = new EventEmitter();
+  readonly product = input.required<Product>();
+  notify = output();
 }

apps/analog-app/src/server/components/hello.ts

@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  OnInit,
+} from '@angular/core';
 
 import {
   injectStaticOutputs,
@@ -7,7 +12,6 @@ import {
 
 @Component({
   selector: 'app-hello',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <h3>Hello From the Server</h3>
@@ -22,7 +26,7 @@ import {
     }
   `,
 })
-export default class HelloComponent {
+export default class HelloComponent implements OnInit {
   Date = Date;
   props = injectStaticProps();
   outputs = injectStaticOutputs<{ loaded: boolean }>();