@memberjunction/ng-shared

Shared services, base classes, and utility components used across all MemberJunction Explorer Angular packages. This is the foundational shared layer that most other Explorer packages depend on.

Overview

This package provides the core services and abstractions that enable MemberJunction Explorer's component ecosystem. The SharedService singleton manages application startup, metadata loading, resource types, and engine pre-warming. The NavigationService centralizes all tab and record navigation with shift-key detection for power users. Base classes like BaseNavigationComponent and BaseResourceComponent define the contracts for routable and resource-bound components.

graph TD
    SS["SharedService\n(Singleton)"] --> MD["Metadata Loading"]
    SS --> RT["ResourceType Management"]
    SS --> EW["Engine Pre-warming"]
    SS --> EVT["Event System"]

    NS["NavigationService"] --> WSM["WorkspaceStateManager"]
    NS --> AM["ApplicationManager"]
    NS --> SK["Shift-Key Detection"]

    BNC["BaseNavigationComponent"] --> BRC["BaseResourceComponent"]
    BRC --> RD["ResourceData"]

    TS["TitleService"] --> DT["Document Title"]
    DMS["DeveloperModeService"] --> US["User Settings\n(Persistence)"]

    style SS fill:#7c5295,stroke:#563a6b,color:#fff
    style NS fill:#2d6a9f,stroke:#1a4971,color:#fff
    style BNC fill:#2d6a9f,stroke:#1a4971,color:#fff
    style BRC fill:#2d8659,stroke:#1a5c3a,color:#fff
    style TS fill:#b8762f,stroke:#8a5722,color:#fff
    style DMS fill:#b8762f,stroke:#8a5722,color:#fff
    style MD fill:#2d8659,stroke:#1a5c3a,color:#fff
    style RT fill:#2d8659,stroke:#1a5c3a,color:#fff
    style EW fill:#2d8659,stroke:#1a5c3a,color:#fff
    style EVT fill:#2d8659,stroke:#1a5c3a,color:#fff
    style WSM fill:#b8762f,stroke:#8a5722,color:#fff
    style AM fill:#b8762f,stroke:#8a5722,color:#fff
    style SK fill:#b8762f,stroke:#8a5722,color:#fff
    style RD fill:#b8762f,stroke:#8a5722,color:#fff
    style DT fill:#b8762f,stroke:#8a5722,color:#fff
    style US fill:#b8762f,stroke:#8a5722,color:#fff

Features

• SharedService: Application startup, metadata refresh, resource type registry, event broadcast, notification helpers, engine pre-warming (AIEngineBase, DashboardEngine, ArtifactMetadataEngine)
• NavigationService: Centralized navigation with auto shift-key detection for "open in new tab" behavior, Home app integration, entity/record/dashboard/query/view/search tab creation
• BaseNavigationComponent: Base class for all routable Explorer components
• BaseResourceComponent: Base class for resource-bound components (dashboards, views, custom resources) with lifecycle events (LoadStarted, LoadComplete, ResourceRecordSaved)
• EventCodes: Standardized event code constants for component communication
• TitleService: Manages the browser document title based on active tab
• DeveloperModeService: Toggleable developer mode persisted to User Settings, with role-based access (Developer, Admin, System Administrator, Integration roles)
• SYSTEM_APP_ID: System-level application identifier constant

Installation

npm install @memberjunction/ng-shared

Key Dependencies

| Dependency | Purpose | |---|---| | @memberjunction/core | Metadata, StartupManager, CompositeKey | | @memberjunction/core-entities | ResourceTypeEntity, ResourceData, DashboardEngine, UserNotificationEntity | | @memberjunction/global | MJGlobal event system, InvokeManualResize | | @memberjunction/graphql-dataprovider | GraphQLDataProvider | | @memberjunction/ai-engine-base | AIEngineBase (pre-warming) | | @memberjunction/ng-base-application | WorkspaceStateManager, ApplicationManager, TabService | | @memberjunction/ng-base-types | BaseAngularComponent | | @memberjunction/ng-notifications | MJNotificationService | | @progress/kendo-angular-notification | Kendo NotificationService | | rxjs | Observables, BehaviorSubject |

Usage

SharedService

import { SharedService } from '@memberjunction/ng-shared';

@Component({ /* ... */ })
export class MyComponent {
  constructor(private shared: SharedService) {}

  async ngOnInit() {
    // Refresh metadata
    await SharedService.RefreshData(true);

    // Access resource types
    const resourceTypes = SharedService.ResourceTypes;

    // Show notification
    this.shared.CreateSimpleNotification('Record saved!', 'success', 2000);
  }
}

NavigationService

import { NavigationService } from '@memberjunction/ng-shared';

@Component({ /* ... */ })
export class MyComponent {
  constructor(private nav: NavigationService) {}

  openRecord(entityName: string, pkey: CompositeKey) {
    // Automatically detects shift-key for new tab behavior
    this.nav.NavigateToRecord(entityName, pkey);
  }

  openDashboard(dashboardId: string) {
    this.nav.NavigateToDashboard(dashboardId);
  }
}

BaseResourceComponent

import { RegisterClass } from '@memberjunction/global';
import { BaseResourceComponent } from '@memberjunction/ng-shared';

@RegisterClass(BaseResourceComponent, 'MyResource')
@Component({ selector: 'my-resource', template: '...' })
export class MyResource extends BaseResourceComponent {
  async GetResourceDisplayName(data: ResourceData): Promise<string> {
    return data.Name;
  }
  async GetResourceIconClass(data: ResourceData): Promise<string> {
    return 'fa-solid fa-chart-bar';
  }
}

DeveloperModeService

import { DeveloperModeService } from '@memberjunction/ng-shared';

@Component({ /* ... */ })
export class MyComponent {
  constructor(private devMode: DeveloperModeService) {}

  ngOnInit() {
    this.devMode.IsEnabled$.subscribe(enabled => {
      this.showDevTools = enabled;
    });
  }
}

Exported API

| Export | Type | Description | |---|---|---| | SharedService | Service | Core singleton for app state, metadata, resource types | | NavigationService | Service | Centralized navigation with shift-key detection | | TitleService | Service | Browser document title management | | DeveloperModeService | Service | Developer mode toggle with persistence | | BaseNavigationComponent | Abstract Class | Base for routable components | | BaseResourceComponent | Abstract Class | Base for resource-bound components | | EventCodes | Constants | Standardized event codes | | SYSTEM_APP_ID | Constant | System-level application identifier | | SharedModule | NgModule | Module declaration |

Build

cd packages/Angular/Explorer/shared && npm run build

License

ISC