Upgrade

.gitignore

@@ -41,4 +41,7 @@ Thumbs.db
 .angular
 
 .nx/cache
-.nx/workspace-data
+.nx/workspace-data
+.specstory
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

apps/examples-e2e/cypress.config.ts

@@ -2,5 +2,10 @@ import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 export default defineConfig({
-  e2e: nxE2EPreset(__dirname),
+  e2e: {
+    ...nxE2EPreset(__dirname),
+    // Please ensure you use `cy.origin()` when navigating between domains and remove this option.
+    // See https://docs.cypress.io/app/references/migration-guide#Changes-to-cyorigin
+    injectDocumentDomain: true,
+  },
 });

apps/examples/project.json

@@ -56,7 +56,8 @@
           "buildTarget": "examples:build:development"
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",

apps/examples/src/app/basic-smart-dumb-example/basic-dumb-alt/basic-dumb-alt.component.html

@@ -4,11 +4,10 @@ <h2>Random brewery</h2>
   <button type="button" (click)="reloadClick.emit($event)">Load another</button>
 </p>
 
-<examples-brewery-details
-  *ngIf="brewery"
-  [brewery]="brewery"
-></examples-brewery-details>
-
-<examples-spinner *ngIf="loading"></examples-spinner>
-
-<examples-error *ngIf="error" [error]="error"></examples-error>
+@if (brewery) {
+<examples-brewery-details [brewery]="brewery"></examples-brewery-details>
+} @if (loading) {
+<examples-spinner></examples-spinner>
+} @if (error) {
+<examples-error [error]="error"></examples-error>
+}

apps/examples/src/app/basic-smart-dumb-example/basic-dumb-alt/basic-dumb-alt.component.ts

@@ -7,15 +7,15 @@ import {
 } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Brewery } from '../model/brewery';
-import { NgIf } from '@angular/common';
+
 import {
   ErrorComponent,
   SpinnerComponent,
 } from '../../loading-state-components';
 import { BreweryDetailsComponent } from '../brewery-details/brewery-details.component';
 
 @Component({
-  imports: [NgIf, ErrorComponent, SpinnerComponent, BreweryDetailsComponent],
+  imports: [ErrorComponent, SpinnerComponent, BreweryDetailsComponent],
   selector: 'examples-basic-dumb-alt',
   templateUrl: './basic-dumb-alt.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/examples/src/app/basic-smart-dumb-example/basic-dumb/basic-dumb.component.html

@@ -4,11 +4,10 @@ <h2>Random brewery</h2>
   <button type="button" (click)="reloadClick.emit($event)">Load another</button>
 </p>
 
-<examples-brewery-details
-  *ngIf="brewery.value"
-  [brewery]="brewery.value"
-></examples-brewery-details>
-
-<examples-spinner *ngIf="brewery.isLoading"></examples-spinner>
-
-<examples-error *ngIf="brewery.error" [error]="brewery.error"></examples-error>
+@if (brewery.value) {
+<examples-brewery-details [brewery]="brewery.value"></examples-brewery-details>
+} @if (brewery.isLoading) {
+<examples-spinner></examples-spinner>
+} @if (brewery.error) {
+<examples-error [error]="brewery.error"></examples-error>
+}

apps/examples/src/app/basic-smart-dumb-example/basic-dumb/basic-dumb.component.ts

@@ -7,15 +7,15 @@ import {
 } from '@angular/core';
 import { HttpRequestState } from 'ngx-http-request-state';
 import { Brewery } from '../model/brewery';
-import { NgIf } from '@angular/common';
+
 import {
   ErrorComponent,
   SpinnerComponent,
 } from '../../loading-state-components';
 import { BreweryDetailsComponent } from '../brewery-details/brewery-details.component';
 
 @Component({
-  imports: [NgIf, SpinnerComponent, ErrorComponent, BreweryDetailsComponent],
+  imports: [SpinnerComponent, ErrorComponent, BreweryDetailsComponent],
   selector: 'examples-basic-dumb',
   templateUrl: './basic-dumb.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/examples/src/app/basic-smart-dumb-example/brewery-details/brewery-details.component.html

@@ -1,11 +1,12 @@
 <h3>{{ brewery.name }}</h3>
 
 <p>
-  {{ brewery.city }},
-  <ng-container *ngIf="brewery.state">{{ brewery.state }},</ng-container>
+  {{ brewery.city }}, @if (brewery.state) { {{ brewery.state }}, }
   {{ brewery.country }}
 </p>
 
-<p *ngIf="brewery.website_url">
+@if (brewery.website_url) {
+<p>
   <a [href]="brewery.website_url">Website</a>
 </p>
+}

apps/examples/src/app/basic-smart-dumb-example/brewery-details/brewery-details.component.ts

@@ -1,10 +1,9 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Brewery } from '../model/brewery';
-import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'examples-brewery-details',
-  imports: [NgIf],
+  imports: [],
   templateUrl: './brewery-details.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

apps/examples/src/app/basic-smart-dumb-example/random-brewery.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Brewery, RandomBreweryResponse } from './model/brewery';
@@ -9,10 +9,10 @@ import { maybeFakeAnErrorResponse } from '../utils/maybeError';
   providedIn: 'root',
 })
 export class RandomBreweryService {
-  constructor(private readonly httpClient: HttpClient) {}
+  readonly #httpClient = inject(HttpClient);
 
   randomBrewery(): Observable<Brewery> {
-    return this.httpClient
+    return this.#httpClient
       .get<RandomBreweryResponse>(
         'https://api.openbrewerydb.org/v1/breweries/random',
         {

apps/examples/src/app/infinite-scroll-example/infinite-scroller/book-list/book-list.component.html

@@ -1,20 +1,28 @@
-<ul *ngIf="books">
-  <li *ngFor="let book of books; trackBy: bookKey">
+@if (books) {
+<ul>
+  @for (book of books; track bookKey($index, book)) {
+  <li>
     <div>
       <strong>{{ book.title }}</strong>
     </div>
-    <div *ngIf="book.subtitle">
+    @if (book.subtitle) {
+    <div>
       <i>{{ book.subtitle }}</i>
     </div>
+    }
     <dl>
       <dt>Author</dt>
-      <dd *ngFor="let author of book.author_name">{{ author }}</dd>
-      <ng-container *ngIf="book.first_sentence">
-        <dt>First sentence</dt>
-        <dd *ngFor="let sentence of book.first_sentence">{{ sentence }}</dd>
-      </ng-container>
+      @for (author of book.author_name; track author) {
+      <dd>{{ author }}</dd>
+      } @if (book.first_sentence) {
+      <dt>First sentence</dt>
+      @for (sentence of book.first_sentence; track sentence) {
+      <dd>{{ sentence }}</dd>
+      } }
       <dt>First published</dt>
       <dd>{{ book.first_publish_year }}</dd>
     </dl>
   </li>
+  }
 </ul>
+}

apps/examples/src/app/infinite-scroll-example/infinite-scroller/book-list/book-list.component.ts

@@ -1,9 +1,8 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import { Book } from '../model/book';
-import { NgForOf, NgIf } from '@angular/common';
 
 @Component({
-  imports: [NgIf, NgForOf],
+  imports: [],
   selector: 'examples-book-list',
   templateUrl: './book-list.component.html',
   styleUrls: ['./book-list.component.css'],

apps/examples/src/app/infinite-scroll-example/infinite-scroller/book-service/book.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { BookApiResponse } from '../model/book';
 import { delay } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
@@ -11,7 +11,7 @@ const BOOKS_URL = 'https://openlibrary.org/search.json';
   providedIn: 'root',
 })
 export class BookService {
-  constructor(private readonly client: HttpClient) {}
+  readonly #http = inject(HttpClient);
 
   findBooks(
     searchTerm: string,
@@ -20,7 +20,7 @@ export class BookService {
   ): Observable<BookApiResponse> {
     const searchTermEncoded = encodeURIComponent(searchTerm);
     const page = start / max + 1;
-    return this.client
+    return this.#http
       .get<BookApiResponse>(
         `${BOOKS_URL}?author=${searchTermEncoded}&page=${page}&limit=${max}`
       )

apps/examples/src/app/infinite-scroll-example/infinite-scroller/infinite-scroller.component.ts

@@ -22,13 +22,13 @@ import {
 } from 'ngx-http-request-state';
 import { BookApiResponse } from './model/book';
 import { BookService } from './book-service/book.service';
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { InfiniteScrollerLayoutComponent } from './layout/infinite-scroller-layout.component';
 
 const PAGE_SIZE = 5;
 
 @Component({
-  imports: [AsyncPipe, NgIf, InfiniteScrollerLayoutComponent],
+  imports: [AsyncPipe, InfiniteScrollerLayoutComponent],
   selector: 'examples-infinite-scroller',
   templateUrl: './infinite-scroller.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/examples/src/app/loading-state-components/error/error.component.html

@@ -1,9 +1,13 @@
-<div *ngIf="visible">
+@if (visible) {
+<div>
   <p>
     <strong>{{ title }}</strong>
   </p>
   <p>{{ message }}</p>
-  <p *ngIf="showRetryButton">
+  @if (showRetryButton) {
+  <p>
     <button type="button" (click)="retry.next()">Retry</button>
   </p>
+  }
 </div>
+}

apps/examples/src/app/loading-state-components/error/error.component.ts

@@ -6,10 +6,9 @@ import {
   Output,
 } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
-import { NgIf } from '@angular/common';
 
 @Component({
-  imports: [NgIf],
+  imports: [],
   selector: 'examples-error',
   templateUrl: './error.component.html',
   styleUrls: ['./error.component.css'],

apps/examples/src/app/loading-state-components/spinner/spinner.component.html

@@ -1,4 +1,6 @@
-<div *ngIf="loading">
+@if (loading) {
+<div>
   <div class="lds-dual-ring"></div>
   <p>Loading...</p>
 </div>
+}

apps/examples/src/app/loading-state-components/spinner/spinner.component.ts

@@ -1,8 +1,7 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import { NgIf } from '@angular/common';
 
 @Component({
-  imports: [NgIf],
+  imports: [],
   selector: 'examples-spinner',
   templateUrl: './spinner.component.html',
   styleUrls: ['./spinner.component.css'],

apps/examples/src/app/multiple-data-sources/beer-list/beer-list.component.html

@@ -1,20 +1,20 @@
-<ng-container *ngIf="beers.length; else noBeers">
-  <table>
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let beer of beers">
-        <td>{{ beer.name }}</td>
-        <td>{{ beer.description }}</td>
-      </tr>
-    </tbody>
-  </table>
-</ng-container>
-
-<ng-template #noBeers>
-  <p>No beers found</p>
-</ng-template>
+@if (beers.length) {
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    @for (beer of beers; track beer) {
+    <tr>
+      <td>{{ beer.name }}</td>
+      <td>{{ beer.description }}</td>
+    </tr>
+    }
+  </tbody>
+</table>
+} @else {
+<p>No beers found</p>
+}

apps/examples/src/app/multiple-data-sources/beer-list/beer-list.component.ts

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { NgIf, NgForOf } from '@angular/common';
+
 import { Beer } from '../model/brews';
 
 @Component({
   selector: 'examples-beer-list',
-  imports: [NgIf, NgForOf],
+  imports: [],
   templateUrl: './beer-list.component.html',
   styleUrls: ['./beer-list.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/examples/src/app/multiple-data-sources/container/multiple-sources-container.component.html

@@ -1,4 +1,4 @@
 <examples-multiple-sources-layout
   [beers]="beers$ | async"
-  (search)="search($event)"
+  (searchBrews)="search($event)"
 ></examples-multiple-sources-layout>

apps/examples/src/app/multiple-data-sources/layout/multiple-sources-layout.component.html

@@ -3,20 +3,25 @@ <h1>Split beers by brew date</h1>
   <fieldset>
     <legend>Brew date</legend>
     <select formControlName="month" title="Month">
-      <option *ngFor="let monthOption of months">{{ monthOption }}</option>
+      @for (monthOption of months; track monthOption) {
+      <option>{{ monthOption }}</option>
+      }
     </select>
     <select formControlName="year" title="Year">
-      <option *ngFor="let yearOption of years">{{ yearOption }}</option>
+      @for (yearOption of years; track yearOption) {
+      <option>{{ yearOption }}</option>
+      }
     </select>
     <button type="submit">Go</button>
   </fieldset>
 </form>
 
-<examples-spinner *ngIf="beers?.isLoading"></examples-spinner>
-
-<examples-error *ngIf="beers?.error as error" [error]="error"></examples-error>
-
-<div *ngIf="beers?.value as results" class="results">
+@if (beers?.isLoading) {
+<examples-spinner></examples-spinner>
+} @if (beers?.error; as error) {
+<examples-error [error]="error"></examples-error>
+} @if (beers?.value; as results) {
+<div class="results">
   <section>
     <h2>Brewed before {{ results.month }}-{{ results.year }}</h2>
     <examples-beer-list [beers]="results.before"></examples-beer-list>
@@ -26,3 +31,4 @@ <h2>Brewed after {{ results.month }}-{{ results.year }}</h2>
     <examples-beer-list [beers]="results.after"></examples-beer-list>
   </section>
 </div>
+}