Update/angular 10 to angular 15 (#364)

Author: ahumadamatias

.gitignore

@@ -31,6 +31,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [2.3.0-dev-test] - 2023-08-11
+
+-   Migrate to angular 16
+
 ### Fixed
 
 -   Fixed error lint with eslint ([#332](https://github.com/reyesoft/ngx-jsonapi/pull/332))

angular.json

@@ -11,19 +11,23 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "aot": true,
             "outputPath": "demo-dist",
             "index": "demo/index.html",
             "main": "demo/main.ts",
             "tsConfig": "demo/tsconfig.app.json",
-            "showCircularDependencies": false,
             "polyfills": "demo/polyfills.ts",
             "assets": [
               "demo/assets",
               "demo/favicon.ico"
             ],
             "styles": [],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -36,9 +40,7 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -49,7 +51,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -67,16 +70,6 @@
           "options": {
             "browserTarget": "ngx-jsonapi:build"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "demo/tsconfig.app.json",
-              "demo/tsconfig.spec.json"
-            ],
-            "exclude": []
-          }
         }
       }
     },
@@ -91,20 +84,43 @@
             "protractorConfig": "./protractor.conf.js",
             "devServerTarget": "ngx-jsonapi:serve"
           }
+        }
+      }
+    },
+    "ngx-jsonapi-lib": {
+      "projectType": "library",
+      "root": "projects/ngx-jsonapi-lib",
+      "sourceRoot": "projects/ngx-jsonapi-lib/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/ngx-jsonapi-lib/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ngx-jsonapi-lib/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/ngx-jsonapi-lib/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": []
+            "tsConfig": "projects/ngx-jsonapi-lib/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
           }
         }
       }
     }
   },
-  "defaultProject": "ngx-jsonapi",
   "schematics": {
     "@schematics/angular:component": {
       "inlineStyle": true,

build/tasks.ts

@@ -26,7 +26,7 @@ export async function compilePackagesWithNgc(config: Config): Promise<void> {
 
 async function _compilePackagesWithNgc(pkg: string): Promise<void> {
     // await util.exec('ngc', [`-p ./src/${pkg}/tsconfig-build.json`]);
-    await util.exec('ngc', [`-p ./src/tsconfig-build.json`]);
+    await util.exec('ng build', [`-p ./src/tsconfig-build.json`]);
 
     /**
      * Test modules are treated differently because nested inside top-level.

demo/app/app.module.ts

@@ -13,8 +13,6 @@ import { SharedModule } from './shared/shared.module';
 
 import { StoreService } from 'ngx-jsonapi/sources/store.service';
 import { JsonRipper } from 'ngx-jsonapi/services/json-ripper';
-import { AuthorsModule } from './authors/authors.module';
-import { BooksModule } from './books/books.module';
 
 const appRoutes: Routes = [
     {
@@ -24,11 +22,15 @@ const appRoutes: Routes = [
     },
     {
         path: 'authors',
-        loadChildren: (): Promise<AuthorsModule> => import('./authors/authors.module').then((m): AuthorsModule => m.AuthorsModule)
+        loadChildren: () => import('./authors/authors.module').then((m) => m.AuthorsModule)
+    },
+    {
+        path: 'systems',
+        loadChildren: () => import('./systems/systems.module').then((m) => m.SystemsModule)
     },
     {
         path: 'books',
-        loadChildren: (): Promise<BooksModule> => import('./books/books.module').then((m): BooksModule => m.BooksModule)
+        loadChildren: () => import('./books/books.module').then((m) => m.BooksModule)
     }
 ];
 
@@ -52,7 +54,7 @@ const appRoutes: Routes = [
         SharedModule,
         RouterModule.forRoot(appRoutes, { useHash: true }),
         NgxJsonapiModule.forRoot({
-            url: environment.jsonapi_url
+            url: environment.api_saldo,
         })
     ],
     declarations: [AppComponent],

demo/app/systems/systems.component.html

@@ -0,0 +1,18 @@
+<h3>systems</h3>
+<demo-collection-info [collection]="systems"></demo-collection-info>
+<table class="table table-striped">
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Name</th>
+        </tr>
+    </thead>
+    <tr *ngFor="let systems of systems.data; trackBy: systems.trackBy">
+        <td>{{ systems.id }}</td>
+        <td>
+            <a [routerLink]="['/systems', systems.id]">{{ systems.attributes.name }}</a>
+            <code><small>{{ systems.source }}</small></code>
+        </td>
+    </tr>
+</table>
+<demo-collection-paginator [collection]="systems"></demo-collection-paginator>

demo/app/systems/systems.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DocumentCollection } from 'ngx-jsonapi';
+import { System, SystemsService } from './systems.service';
+
+@Component({
+    selector: 'bc-systems',
+    templateUrl: './systems.component.html',
+    styles: [
+    ]
+})
+export class SystemsComponent {
+    public systems: DocumentCollection<System>;
+
+    public constructor(private route: ActivatedRoute, private authorsService: SystemsService) {
+        route.queryParams.subscribe(({ page }) => {
+            authorsService
+                .all()
+                .subscribe(
+                    systems => {
+                        this.systems = systems;
+                    },
+                    error => console.error('Could not load authors :(', error)
+                );
+        });
+    }
+}

demo/app/systems/systems.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SystemsComponent } from './systems.component';
+import { RouterModule, Routes } from '@angular/router';
+import { SharedModule } from '../shared/shared.module';
+import { SystemsService } from './systems.service';
+
+export const routes: Routes = [
+    {
+        path: '',
+        component: SystemsComponent
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class SystemsRoutingModule { }
+
+
+@NgModule({
+    declarations: [
+        SystemsComponent
+    ],
+    imports: [
+        CommonModule,
+        SharedModule,
+        SystemsRoutingModule
+    ],
+    providers: [SystemsService]
+})
+export class SystemsModule { }

demo/app/systems/systems.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Service, Resource, DocumentCollection } from 'ngx-jsonapi';
+import { Book } from '../books/books.service';
+import { Photo } from '../photos/photos.service';
+
+export class System extends Resource {
+    public attributes: any;
+
+    public relationships: {
+        books: DocumentCollection<Book>;
+        photos: DocumentCollection<Photo>
+    } = {
+        books: new DocumentCollection<Book>(),
+        photos: new DocumentCollection<Photo>()
+    };
+}
+
+@Injectable()
+export class SystemsService extends Service<System> {
+    public resource: typeof System = System;
+    public type: string = 'systems';
+}

demo/environments/environment.ts

@@ -5,5 +5,6 @@
 
 export const environment: { [key: string]: any } = {
     production: false,
-    jsonapi_url: '//jsonapiplayground.reyesoft.com/v2/'
+    jsonapi_url: '//jsonapiplayground.reyesoft.com/v2/',
+    api_saldo: 'https://api.saldo.com.ar/v3/'
 };