62 update readme of npm package, added LLM reference, optimized code for ng 22 (#72)

Author: danielmurrmann

.github/workflows/deploy-docs.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.x
+          node-version: 26.x
 
       # Restore dependencies
       - name: Restore dependencies for lib

AGENTS.md

@@ -12,9 +12,9 @@ How tests are written (libs/ngrx-hateoas)
 - Location: `libs/ngrx-hateoas/src/lib/**/*.spec.ts`.
 - Framework / runner: Angular unit tests using Jasmine (see `tsconfig.spec.json` types: `jasmine`) and Angular TestBed utilities.
 - Common patterns:
-  - Use `TestBed.configureTestingModule(...)` with providers such as `provideZonelessChangeDetection()`, `provideHttpClient()` and `provideHttpClientTesting()` where needed.
+  - Use `TestBed.configureTestingModule(...)` with providers such as `provideHttpClient()` and `provideHttpClientTesting()` where needed.
   - Services that call HTTP use `HttpTestingController` and `expectOne(...).flush(...)` to simulate server responses and assert request properties (method, body, headers).
-  - Many tests assert metastate signals (e.g., `isLoading`, `isLoaded`, `isAvailable`) and verify reactive behavior (cancellation of previous requests, reactive reloads when a `Signal` changes) via `signalStore`, `signal()` and `TestBed.flushEffects()` where applicable.
+  - Many tests assert metastate signals (e.g., `isLoading`, `isLoaded`, `isAvailable`) and verify reactive behavior (cancellation of previous requests, reactive reloads when a `Signal` changes) via `signalStore`, `signal()` and `TestBed.tick()` where applicable.
   - Tests use `async/await` or `expectAsync` for promise-based operations and standard Jasmine matchers (`toBeTrue`, `toBeFalse`, `toEqual`, `toBe`, `toBeDefined`, etc.).
   - Tests cover pipes, services (request/hateoas), and store-features (loading, writable copies, actions), focusing on isolated unit behavior.
 
@@ -24,7 +24,6 @@ Playground / local demo
 Rules for agents (editing / extending)
 - When changing features, update matching docs in `doc/docs/guide/*` and add/adjust unit tests under `libs/ngrx-hateoas/src/lib/**`.
 - For HTTP-related behavior, follow existing test patterns using `provideHttpClientTesting()` and `HttpTestingController`.
-- Use `provideZonelessChangeDetection()` in TestBed providers to match existing test environment.
 
 References
 - See `doc/docs/guide/01-getting-started.md` and `doc/docs/guide/02-concept.md` for conceptual details and examples.

README.md

@@ -1,22 +1,98 @@
-# NGRX Hateoas
+# ngrx-hateoas
 
-A library to bring hypermedia json into the ngrx signal store following the HATEOAS approach to make it easily useable within Angular.
+`ngrx-hateoas` is an Angular library for loading hypermedia JSON into the NgRx Signal Store, following related-resource links, editing state, and executing actions described by the backend.
 
-## Repo Usage
+This repository contains the published library, an interactive playground with a local demo API, and the documentation website.
 
-The repository provides the library itself, a playground app and a dummy backend which provides some Hypermedia Web APIs.``
+## Project Links
 
-To run the playground app clone the repository and run an `npm install`. Then start the backend with `npm run server` and the playground app with `npm start`.
+- [npm package](https://www.npmjs.com/package/@angular-architects/ngrx-hateoas)
+- [Library quick start](./libs/ngrx-hateoas/README.md)
+- [Documentation](https://angular-architects.github.io/ngrx-hateoas/)
+- [Getting Started guide](https://angular-architects.github.io/ngrx-hateoas/docs/guide/getting-started)
+- [Issues and feature requests](https://github.com/angular-architects/ngrx-hateoas/issues)
 
-## Playground applicaiton
+## Repository Structure
 
-Use and review the playground application inside the repository to understand how to use the library. Also you can review the http responses and requests in the browser network tab to get an impression of how hypermedia json can look like. 
+| Path | Purpose |
+| --- | --- |
+| [`libs/ngrx-hateoas`](./libs/ngrx-hateoas) | Angular library source, public API, and unit tests |
+| [`apps/playground`](./apps/playground) | Angular application demonstrating the library |
+| [`apps/playground/server.js`](./apps/playground/server.js) | Local demo API |
+| [`apps/playground/db.json`](./apps/playground/db.json) | Data used by the local demo API |
+| [`doc`](./doc) | Docusaurus documentation website |
 
-## Lib Usage
-The library is available as npm package here: https://www.npmjs.com/package/@angular-architects/ngrx-hateoas
+## Install Dependencies
 
-## Documentation
-Find the documentation here: https://angular-architects.github.io/ngrx-hateoas/
+Clone the repository and install the root workspace dependencies:
 
-## Real World Sample Application
-There is a sample application [Fancy.ResourceLinker.Sample](https://github.com/fancyDevelopment/Fancy.ResourceLinker.Sample) which demonstrates end to end real world usage of hypermedia in Angular and also some other aspects of a real wold system.
+```bash
+npm i
+```
+
+## Run the Playground
+
+Start the demo API in one terminal:
+
+```bash
+npm run server
+```
+
+The API listens on `http://localhost:5100`.
+
+Start the Angular playground in another terminal:
+
+```bash
+npm start
+```
+
+Open `http://localhost:4200` and use the browser network tools to inspect the hypermedia responses and the requests derived from their links and actions.
+
+## Build and Verify the Library
+
+Build the Angular library:
+
+```bash
+npm run build
+```
+
+Run the complete headless test suite with coverage:
+
+```bash
+npm run test
+```
+
+Run linting:
+
+```bash
+npm run lint
+```
+
+## Work on the Documentation
+
+The documentation website has its own dependencies. Install and start it from the `doc` directory:
+
+```bash
+cd doc
+npm i
+npm start
+```
+
+Create a production documentation build with:
+
+```bash
+cd doc
+npm run build
+```
+
+## Real-World Sample
+
+The [Fancy.ResourceLinker.Sample](https://github.com/fancyDevelopment/Fancy.ResourceLinker.Sample) project demonstrates end-to-end hypermedia usage with Angular and a .NET backend.
+
+## Contributing
+
+Bug reports, feature proposals, documentation improvements, and pull requests are welcome. Before opening a pull request, run the headless tests, library build, and lint checks described above.
+
+## License
+
+This project is licensed under the terms of the [repository license](./LICENSE).

apps/playground/src/app/app.config.ts

@@ -1,13 +1,11 @@
-import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
+import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
-import { provideHttpClient, withXhr } from '@angular/common/http';
 import { provideHateoas } from '@angular-architects/ngrx-hateoas';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideZonelessChangeDetection(),
     provideRouter(routes),
     provideHateoas()
   ]

apps/playground/src/app/flight/flight.routes.ts

@@ -20,7 +20,7 @@ export const FLIHGT_ROUTES: Routes = [{
 }, {
     path: "search/:url",
     component: FlightSearchComponent,
-    canActivate: [(routeSnapshot: ActivatedRouteSnapshot) => inject(FlightSearchStore).loadFlightSearchVmFromUrl(routeSnapshot.paramMap.get('url'), true)]
+    canActivate: [(routeSnapshot: ActivatedRouteSnapshot) => inject(FlightSearchStore).loadFlightSearchVmFromUrl(routeSnapshot.paramMap.get('url'))]
 }, {
     path: "edit/:url",
     component: FlightEditComponent,

apps/playground/src/app/flight/shared/flight-connection-form/flight-connection-form.component.ts

@@ -1,6 +1,6 @@
 import { Component, input } from '@angular/core';
 import { FlightConnection } from '../../flight.entities';
-import { FormField, FieldTree } from '@angular/forms/signals';
+import { FieldTree, FormField } from '@angular/forms/signals';
 
 @Component({
     selector: 'app-flight-connection-form',

apps/playground/src/app/flight/shared/flight-operator-form/flight-operator-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, input } from '@angular/core';
-import { FormField, FieldTree } from '@angular/forms/signals';
+import { FieldTree, FormField } from '@angular/forms/signals';
 import { Aircraft, FlightOperator } from '../../flight.entities';
 
 @Component({

apps/playground/src/app/flight/shared/flight-price-form/flight-price-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, input } from '@angular/core';
-import { FormField, FieldTree } from '@angular/forms/signals';
+import { FieldTree, FormField } from '@angular/forms/signals';
 import { FlightPrice } from '../../flight.entities';
 
 @Component({

apps/playground/src/app/flight/shared/flight-times-form/flight-times-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, input } from '@angular/core';
-import { FormField, FieldTree } from '@angular/forms/signals';
+import { FieldTree, FormField } from '@angular/forms/signals';
 import { FlightTimes } from '../../flight.entities';
 
 @Component({

doc/docs/guide/01-getting-started.md

@@ -37,12 +37,11 @@ To install the **ngrx-hateoas** library run
 npm i @angular-architects/ngrx-hateoas
 ``
 
-Finally you have to add the **ngrx-hateoas** services to your application by using the `provideHateoas()` function. Since **ngrx-hateoas** uses the Angular HTTP client to make its requests to the backend you should also add `provideHttpClient()`.
+Finally you have to add the **ngrx-hateoas** services to your application by using the `provideHateoas()` function.
 
 ```ts
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideHttpClient(),
     provideHateoas()
   ]
 };