Angular

Integrate the General Wisdom Provider SDK in an Angular 17 standalone component using ngOnInit and ngOnDestroy lifecycle hooks.

Prerequisites

• Node.js 20+
• Angular CLI 17+ (or create a project below)
• Your Application ID and API Key from the Provider Dashboard

Quick Setup

ng new my-gw-app --standalone --routing --style=scss
cd my-gw-app
npm install @mission_sciences/provider-sdk
ng serve

Complete Example

src/app/app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MarketplaceSDK } from '@mission_sciences/provider-sdk';

const APP_ID = 'YOUR_APP_ID';
const API_KEY = 'YOUR_API_KEY';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div>
      <!-- Your application content -->
    </div>
  `,
})
export class AppComponent implements OnInit, OnDestroy {
  private sdk: MarketplaceSDK | null = null;

  ngOnInit(): void {
    this.sdk = new MarketplaceSDK({
      applicationId:            APP_ID,
      apiKey:                   API_KEY,
      environment:              'production',   // 'demo' | 'production'
      autoStart:                true,
      themeMode:                'auto',         // 'light' | 'dark' | 'auto'
      warningThresholdSeconds:  300,            // warn user 5 min before expiry
      enableHeartbeat:          false,          // keep-alive ping
      heartbeatIntervalSeconds: 30,
      debug:                    false,
    });
    this.sdk.initialize().catch(console.error);
  }

  ngOnDestroy(): void {
    this.sdk?.destroy();
  }
}

Replace placeholders

Swap YOUR_APP_ID and YOUR_API_KEY with the credentials from your Provider Dashboard.

Pattern Breakdown

Why OnInit / OnDestroy?

Angular lifecycle hooks provide deterministic timing for setup and teardown:

Hook	Purpose
ngOnInit	Component is initialized and inputs are bound. Safe to start the SDK.
ngOnDestroy	Component is being removed from the DOM. Release SDK resources.

Why not the constructor?

The constructor runs before Angular has finished setting up the component. DOM-dependent SDK features may not work correctly if initialized too early. ngOnInit guarantees the component is fully wired up.

Standalone components

Angular 17 defaults to standalone components (no NgModule). The SDK integration does not require any Angular modules — it is a plain JavaScript library instantiated in the lifecycle hooks.

Service Pattern (Optional)

For larger applications, wrap the SDK in an injectable service:

src/app/marketplace-sdk.service.ts

import { Injectable, OnDestroy } from '@angular/core';
import { MarketplaceSDK } from '@mission_sciences/provider-sdk';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class MarketplaceSdkService implements OnDestroy {
  private sdk: MarketplaceSDK | null = null;

  initialize(): void {
    if (this.sdk) return; // Already initialized

    this.sdk = new MarketplaceSDK({
      applicationId:            environment.gwAppId,
      apiKey:                   environment.gwApiKey,
      environment:              environment.gwEnvironment,
      autoStart:                true,
      themeMode:                'auto',
      warningThresholdSeconds:  300,
      enableHeartbeat:          false,
      heartbeatIntervalSeconds: 30,
      debug:                    !environment.production,
    });
    this.sdk.initialize().catch(console.error);
  }

  ngOnDestroy(): void {
    this.sdk?.destroy();
    this.sdk = null;
  }
}

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { MarketplaceSdkService } from './marketplace-sdk.service';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<div><!-- Your application content --></div>`,
})
export class AppComponent implements OnInit {
  constructor(private readonly sdkService: MarketplaceSdkService) {}

  ngOnInit(): void {
    this.sdkService.initialize();
  }
}

Configuration Options

Option	Type	Default	Description
applicationId	string	—	Your registered application ID
apiKey	string	—	Your API key
environment	'demo' | 'production'	'production'	Target environment
autoStart	boolean	true	Start session automatically on init
themeMode	'light' | 'dark' | 'auto'	'auto'	UI theme preference
warningThresholdSeconds	number	300	Seconds before expiry to show warning
enableHeartbeat	boolean	false	Enable keep-alive pings
heartbeatIntervalSeconds	number	30	Interval between heartbeat pings
debug	boolean	false	Enable verbose console logging

Common Gotchas

Forgetting OnDestroy

If the component is destroyed without calling sdk.destroy(), the session connection remains open. This is especially problematic with Angular routing — each navigation creates a new component instance without cleaning up the previous one.

Zone.js and async operations

The SDK manages its own async operations (WebSocket connections, timers). These run outside Angular's zone by default, which is fine — the SDK handles its own UI updates. Do not wrap SDK calls in NgZone.run() unless you need to trigger Angular change detection from SDK events.

Server-side rendering (Angular Universal)

If using Angular SSR, guard the SDK initialization:

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, Inject } from '@angular/core';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

ngOnInit(): void {
  if (isPlatformBrowser(this.platformId)) {
    // Initialize SDK only in the browser
  }
}

Environment files

Store credentials in Angular's environment files:

src/environments/environment.ts

export const environment = {
  production: false,
  gwAppId: 'YOUR_APP_ID',
  gwApiKey: 'YOUR_API_KEY',
  gwEnvironment: 'demo' as const,
};

src/environments/environment.prod.ts

export const environment = {
  production: true,
  gwAppId: 'YOUR_APP_ID',
  gwApiKey: 'YOUR_API_KEY',
  gwEnvironment: 'production' as const,
};

Next Steps

• Session Lifecycle — understand session states and transitions
• React Guide — compare with the React integration
• Playground — experiment with SDK options interactively