DEV-1177_Actualizar-ngx-jsonapi-a-Angular-18

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.routes.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/authors/components/author.component.html

@@ -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>

demo/app/authors/components/author.component.ts

@@ -1,18 +1,23 @@
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { RouterModule, ActivatedRoute } from '@angular/router';
 import { Resource } from 'ngx-jsonapi';
+import { CollectionInfoComponent } from '../../shared/collection-info.component';
+import { ResourceInfoComponent } from '../../shared/resource-info.component';
+import { CollectionPaginatorComponent } from '../../shared/collection-paginator.component';
 import { PhotosService } from '../../photos/photos.service';
 import { AuthorsService, Author } from '../authors.service';
 import { BooksService } from '../../books/books.service';
 
 @Component({
     selector: 'demo-author',
-    standalone: false,
+    standalone: true,
+    imports: [CommonModule, RouterModule, ResourceInfoComponent, CollectionInfoComponent, CollectionPaginatorComponent],
     templateUrl: './author.component.html'
 })
 export class AuthorComponent {
-    public author: Author;
-    public relatedbooks: Array<Resource>;
+    public author: Author | null = null;
+    public relatedbooks: Array<Resource> | null = null;
 
     public constructor(
         protected authorsService: AuthorsService,
@@ -35,7 +40,8 @@ export class AuthorComponent {
     */
     public newAuthor(): void {
         const author: Author = this.authorsService.new();
-        author.attributes.name = prompt('New author name:', 'John Doe');
+        const name: string | null = prompt('New author name:', 'John Doe');
+        author.attributes.name = name || '';
         if (!author.attributes.name) {
             return;
         }
@@ -54,17 +60,24 @@ export class AuthorComponent {
     Update name for actual author
     */
     public updateAuthor(): void {
-        this.author.attributes.name = prompt('Author name:', this.author.attributes.name);
-        console.log('author data for save with book include', this.author.toObject({ include: ['books'] }));
-        console.log('author data for save without any include', this.author.toObject());
-        this.author.save(/* { include: ['book'] } */).subscribe((success) => {
-            console.log('author saved', this.author.toObject());
+        const currentAuthor: Author | null = this.author;
+        if (!currentAuthor) return;
+
+        const newName: string | null = prompt('Author name:', currentAuthor.attributes.name);
+        currentAuthor.attributes.name = newName || currentAuthor.attributes.name;
+        console.log('author data for save with book include', currentAuthor.toObject({ include: ['books'] }));
+        console.log('author data for save without any include', currentAuthor.toObject());
+        currentAuthor.save(/* { include: ['book'] } */).subscribe((success) => {
+            console.log('author saved', currentAuthor.toObject());
         });
     }
 
     public removeRelationship(): void {
-        this.author.removeRelationship('photos', '1');
-        this.author.save();
-        console.log('removeRelationship save with photos include', this.author.toObject());
+        const currentAuthor: Author | null = this.author;
+        if (!currentAuthor) return;
+
+        currentAuthor.removeRelationship('photos', '1');
+        currentAuthor.save();
+        console.log('removeRelationship save with photos include', currentAuthor.toObject());
     }
 }