Improve angular SDK archictecture

Author: DonOmalVindula

package.json

@@ -50,6 +50,13 @@
     "undici": "^7.21.0"
   },
   "pnpm": {
+    "packageExtensions": {
+      "@analogjs/vite-plugin-angular": {
+        "peerDependencies": {
+          "typescript": ">=5.5"
+        }
+      }
+    },
     "overrides": {
       "pbkdf2": "3.1.3",
       "sha.js": "2.4.12",

packages/angular/esbuild.config.mjs

@@ -0,0 +1,8 @@
+{
+  "$schema": "node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist",
+  "allowedNonPeerDependencies": ["@asgardeo/browser", "@asgardeo/i18n", "tslib"],
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

packages/angular/ng-package.json

@@ -16,47 +16,54 @@
   "author": "WSO2",
   "license": "Apache-2.0",
   "type": "module",
-  "main": "dist/cjs/index.js",
-  "module": "dist/index.js",
+  "module": "dist/fesm2022/asgardeo-angular.mjs",
+  "typings": "dist/types/asgardeo-angular.d.ts",
   "exports": {
-    "import": "./dist/index.js",
-    "require": "./dist/cjs/index.js"
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./dist/types/asgardeo-angular.d.ts",
+      "default": "./dist/fesm2022/asgardeo-angular.mjs"
+    }
   },
   "files": [
     "dist",
     "README.md",
     "LICENSE"
   ],
-  "types": "dist/index.d.ts",
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/asgardeo/javascript",
     "directory": "packages/angular"
   },
   "scripts": {
-    "build": "pnpm clean && node esbuild.config.mjs && tsc -p tsconfig.lib.json --emitDeclarationOnly --outDir dist",
+    "build": "pnpm clean && ng-packagr -p ng-package.json",
     "clean": "rimraf dist",
     "fix:lint": "eslint . --ext .js,.ts,.cjs,.mjs",
     "lint": "eslint . --ext .js,.ts,.cjs,.mjs",
     "test": "vitest",
     "typecheck": "tsc -p tsconfig.lib.json"
   },
   "devDependencies": {
+    "@angular/compiler": "21.1.5",
+    "@angular/compiler-cli": "21.1.5",
     "@types/node": "22.15.3",
     "@wso2/eslint-plugin": "catalog:",
     "@wso2/prettier-config": "catalog:",
-    "esbuild": "0.25.9",
     "eslint": "8.57.0",
     "jsdom": "26.1.0",
+    "ng-packagr": "21.1.0",
     "prettier": "2.6.2",
     "rimraf": "6.1.0",
-    "typescript": "5.7.2",
+    "typescript": "5.9.3",
     "vitest": "3.1.3"
   },
   "peerDependencies": {
-    "@angular/common": ">=17.0.0",
-    "@angular/core": ">=17.0.0",
-    "@angular/router": ">=17.0.0",
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0",
+    "@angular/router": ">=18.0.0",
     "rxjs": ">=7.0.0"
   },
   "dependencies": {

packages/angular/package.json

@@ -18,13 +18,10 @@
 
 import {
   Organization,
-  HttpInstance,
-  HttpResponse,
-  AsgardeoSPAClient,
-  HttpRequestConfig,
   createOrganization as baseCreateOrganization,
   CreateOrganizationConfig as BaseCreateOrganizationConfig,
 } from '@asgardeo/browser';
+import {createDefaultFetcher} from '../utils/fetcher';
 
 /**
  * Configuration for the createOrganization request (Angular-specific)
@@ -96,30 +93,10 @@ const createOrganization = async ({
   fetcher,
   instanceId = 0,
   ...requestConfig
-}: CreateOrganizationConfig): Promise<Organization> => {
-  const defaultFetcher = async (url: string, config: RequestInit): Promise<Response> => {
-    const client: AsgardeoSPAClient = AsgardeoSPAClient.getInstance(instanceId);
-    const httpClient: HttpInstance = client.httpRequest.bind(client);
-    const response: HttpResponse<any> = await httpClient({
-      data: config.body ? JSON.parse(config.body as string) : undefined,
-      headers: config.headers as Record<string, string>,
-      method: config.method || 'POST',
-      url,
-    } as HttpRequestConfig);
-
-    return {
-      json: () => Promise.resolve(response.data),
-      ok: response.status >= 200 && response.status < 300,
-      status: response.status,
-      statusText: response.statusText || '',
-      text: () => Promise.resolve(typeof response.data === 'string' ? response.data : JSON.stringify(response.data)),
-    } as Response;
-  };
-
-  return baseCreateOrganization({
+}: CreateOrganizationConfig): Promise<Organization> =>
+  baseCreateOrganization({
     ...requestConfig,
-    fetcher: fetcher || defaultFetcher,
+    fetcher: fetcher || createDefaultFetcher(instanceId),
   });
-};
 
 export default createOrganization;

packages/angular/src/api/createOrganization.ts

@@ -17,14 +17,11 @@
  */
 
 import {
-  HttpInstance,
-  HttpResponse,
-  AsgardeoSPAClient,
-  HttpRequestConfig,
   getAllOrganizations as baseGetAllOrganizations,
   GetAllOrganizationsConfig as BaseGetAllOrganizationsConfig,
   AllOrganizationsApiResponse,
 } from '@asgardeo/browser';
+import {createDefaultFetcher} from '../utils/fetcher';
 
 /**
  * Configuration for the getAllOrganizations request (Angular-specific)
@@ -88,29 +85,10 @@ const getAllOrganizations = async ({
   fetcher,
   instanceId = 0,
   ...requestConfig
-}: GetAllOrganizationsConfig): Promise<AllOrganizationsApiResponse> => {
-  const defaultFetcher = async (url: string, config: RequestInit): Promise<Response> => {
-    const client: AsgardeoSPAClient = AsgardeoSPAClient.getInstance(instanceId);
-    const httpClient: HttpInstance = client.httpRequest.bind(client);
-    const response: HttpResponse<any> = await httpClient({
-      headers: config.headers as Record<string, string>,
-      method: config.method || 'GET',
-      url,
-    } as HttpRequestConfig);
-
-    return {
-      json: () => Promise.resolve(response.data),
-      ok: response.status >= 200 && response.status < 300,
-      status: response.status,
-      statusText: response.statusText || '',
-      text: () => Promise.resolve(typeof response.data === 'string' ? response.data : JSON.stringify(response.data)),
-    } as Response;
-  };
-
-  return baseGetAllOrganizations({
+}: GetAllOrganizationsConfig): Promise<AllOrganizationsApiResponse> =>
+  baseGetAllOrganizations({
     ...requestConfig,
-    fetcher: fetcher || defaultFetcher,
+    fetcher: fetcher || createDefaultFetcher(instanceId),
   });
-};
 
 export default getAllOrganizations;

packages/angular/src/api/getAllOrganizations.ts

@@ -18,13 +18,10 @@
 
 import {
   Organization,
-  HttpInstance,
-  HttpResponse,
-  AsgardeoSPAClient,
-  HttpRequestConfig,
   getMeOrganizations as baseGetMeOrganizations,
   GetMeOrganizationsConfig as BaseGetMeOrganizationsConfig,
 } from '@asgardeo/browser';
+import {createDefaultFetcher} from '../utils/fetcher';
 
 /**
  * Configuration for the getMeOrganizations request (Angular-specific)
@@ -92,29 +89,10 @@ const getMeOrganizations = async ({
   fetcher,
   instanceId = 0,
   ...requestConfig
-}: GetMeOrganizationsConfig): Promise<Organization[]> => {
-  const defaultFetcher = async (url: string, config: RequestInit): Promise<Response> => {
-    const client: AsgardeoSPAClient = AsgardeoSPAClient.getInstance(instanceId);
-    const httpClient: HttpInstance = client.httpRequest.bind(client);
-    const response: HttpResponse<any> = await httpClient({
-      headers: config.headers as Record<string, string>,
-      method: config.method || 'GET',
-      url,
-    } as HttpRequestConfig);
-
-    return {
-      json: () => Promise.resolve(response.data),
-      ok: response.status >= 200 && response.status < 300,
-      status: response.status,
-      statusText: response.statusText || '',
-      text: () => Promise.resolve(typeof response.data === 'string' ? response.data : JSON.stringify(response.data)),
-    } as Response;
-  };
-
-  return baseGetMeOrganizations({
+}: GetMeOrganizationsConfig): Promise<Organization[]> =>
+  baseGetMeOrganizations({
     ...requestConfig,
-    fetcher: fetcher || defaultFetcher,
+    fetcher: fetcher || createDefaultFetcher(instanceId),
   });
-};
 
 export default getMeOrganizations;

packages/angular/src/api/getMeOrganizations.ts

@@ -17,14 +17,11 @@
  */
 
 import {
-  HttpInstance,
-  HttpResponse,
-  AsgardeoSPAClient,
-  HttpRequestConfig,
   getOrganization as baseGetOrganization,
   GetOrganizationConfig as BaseGetOrganizationConfig,
   OrganizationDetails,
 } from '@asgardeo/browser';
+import {createDefaultFetcher} from '../utils/fetcher';
 
 /**
  * Configuration for the getOrganization request (Angular-specific)
@@ -84,29 +81,10 @@ const getOrganization = async ({
   fetcher,
   instanceId = 0,
   ...requestConfig
-}: GetOrganizationConfig): Promise<OrganizationDetails> => {
-  const defaultFetcher = async (url: string, config: RequestInit): Promise<Response> => {
-    const client: AsgardeoSPAClient = AsgardeoSPAClient.getInstance(instanceId);
-    const httpClient: HttpInstance = client.httpRequest.bind(client);
-    const response: HttpResponse<any> = await httpClient({
-      headers: config.headers as Record<string, string>,
-      method: config.method || 'GET',
-      url,
-    } as HttpRequestConfig);
-
-    return {
-      json: () => Promise.resolve(response.data),
-      ok: response.status >= 200 && response.status < 300,
-      status: response.status,
-      statusText: response.statusText || '',
-      text: () => Promise.resolve(typeof response.data === 'string' ? response.data : JSON.stringify(response.data)),
-    } as Response;
-  };
-
-  return baseGetOrganization({
+}: GetOrganizationConfig): Promise<OrganizationDetails> =>
+  baseGetOrganization({
     ...requestConfig,
-    fetcher: fetcher || defaultFetcher,
+    fetcher: fetcher || createDefaultFetcher(instanceId),
   });
-};
 
 export default getOrganization;

packages/angular/src/api/getOrganization.ts

@@ -16,15 +16,8 @@
  * under the License.
  */
 
-import {
-  Schema,
-  HttpInstance,
-  HttpResponse,
-  AsgardeoSPAClient,
-  HttpRequestConfig,
-  getSchemas as baseGetSchemas,
-  GetSchemasConfig as BaseGetSchemasConfig,
-} from '@asgardeo/browser';
+import {Schema, getSchemas as baseGetSchemas, GetSchemasConfig as BaseGetSchemasConfig} from '@asgardeo/browser';
+import {createDefaultFetcher} from '../utils/fetcher';
 
 /**
  * Configuration for the getSchemas request (Angular-specific)
@@ -78,29 +71,10 @@ export interface GetSchemasConfig extends Omit<BaseGetSchemasConfig, 'fetcher'>
  * }
  * ```
  */
-const getSchemas = async ({fetcher, instanceId = 0, ...requestConfig}: GetSchemasConfig): Promise<Schema[]> => {
-  const defaultFetcher = async (url: string, config: RequestInit): Promise<Response> => {
-    const client: AsgardeoSPAClient = AsgardeoSPAClient.getInstance(instanceId);
-    const httpClient: HttpInstance = client.httpRequest.bind(client);
-    const response: HttpResponse<any> = await httpClient({
-      headers: config.headers as Record<string, string>,
-      method: config.method || 'GET',
-      url,
-    } as HttpRequestConfig);
-
-    return {
-      json: () => Promise.resolve(response.data),
-      ok: response.status >= 200 && response.status < 300,
-      status: response.status,
-      statusText: response.statusText || '',
-      text: () => Promise.resolve(typeof response.data === 'string' ? response.data : JSON.stringify(response.data)),
-    } as Response;
-  };
-
-  return baseGetSchemas({
+const getSchemas = async ({fetcher, instanceId = 0, ...requestConfig}: GetSchemasConfig): Promise<Schema[]> =>
+  baseGetSchemas({
     ...requestConfig,
-    fetcher: fetcher || defaultFetcher,
+    fetcher: fetcher || createDefaultFetcher(instanceId),
   });
-};
 
 export default getSchemas;