DEV-1177_Actualizar-ngx-jsonapi-a-Angular-18 (#377)

Author: NicoGarcia12

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [2.5.0] - 2025-09-16
+
+-   Migrate to angular 18
+
 ## [2.4.0] - 2025-08-15
 
 -   Migrate to angular 17

angular.json

@@ -9,7 +9,7 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:browser-esbuild",
           "options": {
             "outputPath": "demo-dist",
             "index": "demo/index.html",

demo/__mocks__/htmlMock.js

@@ -0,0 +1 @@
+module.exports = '';

demo/app/app.component.html

@@ -1,7 +1,9 @@
 <main>
     <h1>
         ngx-jsonapi example
-        <small class="bg-primary" *ngIf="loading">{{ loading }} <img src="http://s.ytimg.com/yt/img/loader-vflff1Mjj.gif" /></small>
+        @defer {
+            <small class="bg-primary">{{ loading }} <img src="http://s.ytimg.com/yt/img/loader-vflff1Mjj.gif" /></small>
+        }
     </h1>
 
     <nav>

demo/app/app.component.ts

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
 import { JsonapiCore } from 'ngx-jsonapi';
 
 @Component({
     selector: 'demo-app',
     styleUrls: ['./app.component.scss'],
-    standalone: false,
+    standalone: true,
+    imports: [CommonModule, RouterModule],
     templateUrl: './app.component.html'
 })
 export class AppComponent /* implements OnInit */ {

demo/app/app.module.ts

@@ -0,0 +1,27 @@
+import { Routes } from '@angular/router';
+
+export const appRoutes: Routes = [
+    {
+        path: '',
+        redirectTo: '/authors',
+        pathMatch: 'full'
+    },
+    {
+        path: 'authors',
+        children: [
+            { path: '', loadComponent: () => import('./authors/components/authors.component').then((c) => c.AuthorsComponent) },
+            { path: ':id', loadComponent: () => import('./authors/components/author.component').then((c) => c.AuthorComponent) }
+        ]
+    },
+    {
+        path: 'systems',
+        children: [{ path: '', loadComponent: () => import('./systems/systems.component').then((c) => c.SystemsComponent) }]
+    },
+    {
+        path: 'books',
+        children: [
+            { path: '', loadComponent: () => import('./books/components/books.component').then((c) => c.BooksComponent) },
+            { path: ':id', loadComponent: () => import('./books/components/book.component').then((c) => c.BookComponent) }
+        ]
+    }
+];

demo/app/app.routes.ts

@@ -1,10 +1,10 @@
-<h3>Author #{{ author.id }}, with books and photos</h3>
+<h3>Author #{{ author?.id }}, with books and photos</h3>
 <demo-resource-info [resource]="author"></demo-resource-info>
-<!-- <pre>authors.get('{{ author.id }}', {{ '{' }} include: ['books', 'photos'] {{ '}' }});</pre> -->
+<!-- <pre>authors.get('{{ author?.id }}', {{ '{' }} include: ['books', 'photos'] {{ '}' }});</pre> -->
 <ul>
-    <li>Name: <strong>{{ author.attributes.name }}</strong></li>
-    <li>Date of birth: <strong>{{ author.attributes.date_of_birth | date }}</strong></li>
-    <li>Date of dead: <strong>{{ author.attributes.date_of_death | date }}</strong></li>
+    <li>Name: <strong>{{ author?.attributes.name }}</strong></li>
+    <li>Date of birth: <strong>{{ author?.attributes.date_of_birth | date }}</strong></li>
+    <li>Date of dead: <strong>{{ author?.attributes.date_of_death | date }}</strong></li>
 </ul>
 <p>
     <button (click)="newAuthor()">New author</button>
@@ -13,35 +13,41 @@ <h3>Author #{{ author.id }}, with books and photos</h3>
 </p>
 
 <h4>Photos</h4>
-<demo-collection-info [collection]="author.relationships.photos"></demo-collection-info>
-<span *ngIf="author.relationships.photos.data.length === 0">
-    This author don't have any photo :(
-</span>
-<span *ngIf="author.relationships.photos.builded">
-    <img *ngFor="let photo of author.relationships.photos.data"
-        [src]="photo.attributes.uri" height="150" style="padding-right: 1em"
-        title="Book id #{{ photo.id }}"
-    />
-</span>
+<demo-collection-info [collection]="author?.relationships.photos"></demo-collection-info>
+@if (author?.relationships.photos.data.length === 0) {
+    <span>This author don't have any photo :(</span>
+}
+@if (author?.relationships.photos.builded) {
+    <span>
+        <img *ngFor="let photo of author()?.relationships.photos.data"
+            [src]="photo.attributes.uri" height="150" style="padding-right: 1em"
+            title="Book id #{{ photo.id }}"
+        />
+    </span>
+}
 
 <h4>Books</h4>
-<demo-collection-info [collection]="author.relationships.books"></demo-collection-info>
-<table class="table table-striped" *ngIf="author.relationships.books.builded">
-    <thead>
-        <tr>
-            <th>ID</th>
-            <th>Title</th>
-            <th>Date Published</th>
-        </tr>
-    </thead>
-    <tr *ngFor="let book of author.relationships.books.data">
-        <td>{{ book.id }}</td>
-        <td>
-            <a [routerLink]="['/books', book.id]">{{ book.attributes.title }}</a>
-        </td>
-        <td>{{ book.attributes.date_published | date }}</td>
-    </tr>
-</table>
+<demo-collection-info [collection]="author?.relationships.books"></demo-collection-info>
+@defer {
+    <table class="table table-striped" *ngIf="author?.relationships.books.builded">
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th>Title</th>
+                <th>Date Published</th>
+            </tr>
+        </thead>
+    <ng-container *ngFor="let book of author?.relationships.books.data; trackBy: trackBookId">
+            <tr>
+                <td>{{ book.id }}</td>
+                <td>
+                    <a [routerLink]="['/books', book.id]">{{ book.attributes.title }}</a>
+                </td>
+                <td>{{ book.attributes.date_published | date }}</td>
+            </tr>
+        </ng-container>
+    </table>
+}
 
 <p>
     <a routerLink="/authors">Volver</a>