feat: upgrade to angular 19

.github/workflows/build-and-test.yml

@@ -33,4 +33,4 @@ jobs:
         run: pnpm -F example build
 
       - name: Test
-        run: pnpm -r test:ci
+        run: pnpm -r test

.node-version

@@ -1 +1 @@
-v20.11.1
+22.12.0

dfx.json

@@ -1,7 +1,13 @@
 {
-  "dfx": "0.21.0",
+  "dfx": "0.24.3",
   "version": 1,
   "output_env_file": ".env",
+  "networks": {
+    "local": {
+      "bind": "127.0.0.1:8080",
+      "type": "ephemeral"
+    }
+  },
   "canisters": {
     "example_backend": {
       "main": "example/backend/main.mo",
@@ -15,13 +21,25 @@
     "example_frontend": {
       "dependencies": ["example_backend"],
       "frontend": {
-        "entrypoint": "example/frontend/dist/browser/index.html"
+        "entrypoint": "example/frontend/dist/index.html"
       },
-      "source": ["example/frontend/dist/browser"],
-      "build": ["pnpm -F example build"],
+      "source": ["example/frontend/dist"],
+      "build": ["pnpm -F example-frontend... build"],
       "type": "assets",
       "gzip": true,
       "optimize": "cycles"
+    },
+    "internet_identity": {
+      "type": "custom",
+      "candid": "https://github.com/dfinity/internet-identity/releases/download/release-2024-01-05/internet_identity.did",
+      "wasm": "https://github.com/dfinity/internet-identity/releases/download/release-2024-01-05/internet_identity_dev.wasm.gz",
+      "specified_id": "rdmx6-jaaaa-aaaaa-aaadq-cai",
+      "remote": {
+        "id": {
+          "ic": "rdmx6-jaaaa-aaaaa-aaadq-cai"
+        }
+      },
+      "frontend": {}
     }
   }
 }

docs/package.json

@@ -30,9 +30,9 @@
     "@types/react": "^18.3.3",
     "search-insights": "^2.15.0",
     "@algolia/client-search": "^4.24.0",
-    "docusaurus-plugin-typedoc": "^1.0.3",
-    "typedoc": "^0.26.4",
-    "typedoc-plugin-markdown": "^4.2.1"
+    "docusaurus-plugin-typedoc": "^1.2.0",
+    "typedoc": "~0.27.6",
+    "typedoc-plugin-markdown": "^4.4.1"
   },
   "browserslist": {
     "production": [

example/frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example",
+  "name": "example-frontend",
   "private": true,
   "type": "module",
   "scripts": {

example/frontend/src/app/app.component.ts

@@ -1,12 +1,16 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Observable, map } from 'rxjs';
 import { IcAuthService } from '@hadronous/ic-angular';
 import { BackendActorService } from './backend-actor.service';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   imports: [CommonModule],
   changeDetection: ChangeDetectionStrategy.Default,
   template: `
@@ -27,10 +31,10 @@ export class AppComponent implements OnInit {
   public readonly isAuthenticated$: Observable<boolean>;
   public readonly principal$: Observable<string | null>;
 
-  constructor(
-    private readonly backendActor: BackendActorService,
-    private readonly authService: IcAuthService,
-  ) {
+  private readonly backendActor = inject(BackendActorService);
+  private readonly authService = inject(IcAuthService);
+
+  constructor() {
     this.isAuthenticated$ = this.authService.isAuthenticated$;
     this.principal$ = this.authService.identity$.pipe(
       map(identity => identity?.getPrincipal().toText() ?? null),

example/frontend/src/app/app.config.ts

@@ -2,9 +2,7 @@ import { ApplicationConfig } from '@angular/core';
 import { provideIcAgent, provideIcAuth } from '@hadronous/ic-angular';
 import { environment } from '../environments/environment';
 
-import { BackendActorService } from './backend-actor.service';
-
-export const appConfig: ApplicationConfig = {
+export const APP_CONFIG: ApplicationConfig = {
   providers: [
     provideIcAgent({
       apiGateway: environment.API_GATEWAY,
@@ -15,6 +13,5 @@ export const appConfig: ApplicationConfig = {
       idlOptions: { idleTimeout: 1_000 * 60 }, // 1 minute
       maxTimeToLive: BigInt(1_000 * 2), // 2 seconds
     }),
-    BackendActorService,
   ],
 };

example/frontend/src/environments/environment.ts

@@ -3,7 +3,7 @@ const IS_MAINNET = DFX_NETWORK === 'mainnet';
 const API_GATEWAY = IS_MAINNET ? 'https://icp-api.io' : window.location.origin;
 const IDENTITY_PROVIDER = IS_MAINNET
   ? 'https://identity.ic0.app/'
-  : 'http://qhbym-qaaaa-aaaaa-aaafq-cai.localhost:8080/';
+  : 'http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:8080/';
 const BACKEND_CANISTER_ID = import.meta.CANISTER_ID_EXAMPLE_BACKEND ?? '';
 
 export const environment = {

example/frontend/src/main.ts

@@ -3,7 +3,7 @@ import getGlobalThis from 'globalthis/polyfill';
 (window as any).global = getGlobalThis();
 
 import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
+import { APP_CONFIG } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
+bootstrapApplication(AppComponent, APP_CONFIG).catch(err => console.error(err));

package.json

@@ -1,10 +1,10 @@
 {
   "name": "ic-angular",
   "private": true,
-  "packageManager": "pnpm@8.11.0",
+  "packageManager": "pnpm@9.15.2+sha256.022309bb31359142b65bfa889e0406d2eebd5acfffca47e6944acf29d9d6a66b",
   "engines": {
-    "node": ">=20.0.0 < 21.0.0",
-    "pnpm": "8.11.0",
+    "node": ">=22.0.0 < 23.0.0",
+    "pnpm": "9.15.2",
     "npm": "please use pnpm"
   },
   "scripts": {
@@ -13,40 +13,40 @@
     "format:check": "prettier --check ."
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1801.1",
-    "@angular-devkit/build-angular": "^18.1.1",
-    "@angular/build": "^18.1.1",
-    "@angular/cli": "^18.1.1",
-    "@angular/common": "^18.1.1",
-    "@angular/compiler": "^18.1.1",
-    "@angular/compiler-cli": "^18.1.1",
-    "@angular/core": "^18.1.1",
-    "@angular/platform-browser": "^18.1.1",
-    "@angular/platform-browser-dynamic": "^18.1.1",
-    "@angular/router": "^18.1.1",
-    "@dfinity/agent": "^1.4.0",
-    "@dfinity/auth-client": "^1.4.0",
-    "@dfinity/candid": "^1.4.0",
-    "@dfinity/identity": "^1.4.0",
-    "@dfinity/principal": "^1.4.0",
+    "@angular-devkit/architect": "0.1900.6",
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular/build": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@dfinity/agent": "^2.1.3",
+    "@dfinity/auth-client": "^2.1.3",
+    "@dfinity/candid": "^2.1.3",
+    "@dfinity/identity": "^2.1.3",
+    "@dfinity/principal": "^2.1.3",
     "@hadronous/ic-build-angular": "workspace:*",
     "@peculiar/webcrypto": "^1.5.0",
-    "@types/jasmine": "^5.1.4",
-    "@types/node": "^20.14.11",
-    "dotenv": "^16.4.5",
-    "esbuild": "0.21.5",
+    "@types/jasmine": "^5.1.5",
+    "@types/node": "^22.10.3",
+    "dotenv": "^16.4.7",
+    "esbuild": "^0.24.2",
     "globalthis": "^1.0.4",
-    "jasmine-core": "^5.1.2",
-    "karma": "^6.4.3",
+    "jasmine-core": "^5.5.0",
+    "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.1",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "ng-packagr": "^18.1.0",
-    "prettier": "^3.3.3",
+    "ng-packagr": "^19.0.1",
+    "prettier": "^3.4.2",
     "rxjs": "^7.8.1",
-    "tslib": "^2.6.3",
-    "typescript": "~5.5.3",
-    "zone.js": "~0.14.8"
+    "tslib": "^2.8.1",
+    "typescript": "~5.6.0",
+    "zone.js": "~0.15.0"
   }
 }

packages/ic-angular/package.json

@@ -5,9 +5,9 @@
     "build": "ng build ic-angular -c production",
     "build:dev": "ng build ic-angular -c development",
     "docs": "typedoc --options ./typedoc.json",
-    "test": "ng test ic-angular",
+    "test": "ng test ic-angular --no-watch --no-progress --browsers=ChromeHeadless",
     "test:coverage": "ng test ic-angular --no-watch --code-coverage",
-    "test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadless",
+    "test:watch": "ng test ic-angular",
     "test:headless": "ng test ic-angular --browsers=ChromeHeadless"
   },
   "type": "module",
@@ -16,12 +16,12 @@
     "directory": "./dist"
   },
   "peerDependencies": {
-    "@angular/core": "^18.0.0",
-    "@angular/router": "^18.0.0",
-    "@dfinity/agent": "^2.0.0",
-    "@dfinity/candid": "^2.0.0",
-    "@dfinity/auth-client": "^2.0.0",
-    "@dfinity/principal": "^2.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@dfinity/agent": "^2.1.3",
+    "@dfinity/candid": "^2.1.3",
+    "@dfinity/auth-client": "^2.1.3",
+    "@dfinity/principal": "^2.1.3",
     "rxjs": "^7.8.0"
   }
 }

packages/ic-angular/src/actor.service.spec.ts

@@ -21,7 +21,6 @@ import { Injectable } from '@angular/core';
 
 interface TestActor {
   say_hello: ActorMethod<[], string>;
-  set_greeting: ActorMethod<[string], string>;
 }
 
 const idlFactory: IDL.InterfaceFactory = ({ IDL }) => {
@@ -48,7 +47,14 @@ describe('createActorService', () => {
     agentServiceMock = createAgentServiceMock();
     agentServiceMock.getInnerAgent.and.returnValue(httpAgentMock);
 
-    service = new TestActorService(agentServiceMock);
+    TestBed.configureTestingModule({
+      providers: [
+        TestActorService,
+        { provide: IcAgentService, useValue: agentServiceMock },
+      ],
+    });
+
+    service = TestBed.inject(TestActorService);
   });
 
   it('should create', () => {

packages/ic-angular/src/actor.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Actor, ActorMethod } from '@dfinity/agent';
 import { IDL } from '@dfinity/candid';
 import { Principal } from '@dfinity/principal';
@@ -23,10 +23,7 @@ export type ActorInterface = Record<string, ActorMethod>;
  * import { createActorService, provideIcAgent } from '@hadronous/ic-angular';
  * import { environment } from '../environments/environment';
  *
- * // temporary fix until DFX upgrades to Candid version 0.10.0
- * // with this version, the idlFactory will be correctly exported from the .did file
- * const { idlFactory } = require('../../../declarations/counter.did');
- * import { _SERVICE } from '../../../declarations/counter.did';
+ * import { idlFactory, _SERVICE } from '../../../declarations/example_backend.did';
  *
  * @Injectable({ providedIn: 'root' })
  * class CounterActorService extends createActorService<_SERVICE>({
@@ -40,7 +37,6 @@ export type ActorInterface = Record<string, ActorMethod>;
  *      apiGateway: environment.API_GATEWAY,
  *      fetchRootKey: !environment.IS_MAINNET,
  *    }),
- *    CounterActorService
  *  ],
  * };
  * ```
@@ -49,7 +45,7 @@ export interface IcActorService<T = ActorInterface> extends Function {
   /**
    * @private
    */
-  new (agentService: IcAgentService): T;
+  new (): T;
 }
 
 /**
@@ -77,10 +73,7 @@ export interface CreateActorOptions {
  * import { createActorService, provideIcAgent } from '@hadronous/ic-angular';
  * import { environment } from '../environments/environment';
  *
- * // temporary fix until DFX upgrades to Candid version 0.10.0
- * // with this version, the idlFactory will be correctly exported from the .did file
- * const { idlFactory } = require('../../../declarations/counter.did');
- * import { _SERVICE } from '../../../declarations/counter.did';
+ * import { idlFactory, _SERVICE } from '../../../declarations/example_backend.did';
  *
  * @Injectable({ providedIn: 'root' })
  * class CounterActorService extends createActorService<_SERVICE>({
@@ -94,7 +87,6 @@ export interface CreateActorOptions {
  *      apiGateway: environment.API_GATEWAY,
  *      fetchRootKey: !environment.IS_MAINNET,
  *    }),
- *    CounterActorService
  *  ],
  * };
  * ```
@@ -105,9 +97,11 @@ export function createIcActorService<T = Record<string, ActorMethod>>({
 }: CreateActorOptions): IcActorService<T> {
   const ActorClass = Actor.createActorClass(idlFactory);
 
-  @Injectable({ providedIn: 'root' })
+  @Injectable()
   class IcActorServiceImpl extends ActorClass {
-    constructor(agentService: IcAgentService) {
+    constructor() {
+      const agentService = inject(IcAgentService);
+
       super({
         canisterId,
         agent: agentService.getInnerAgent(),