@memberjunction/ng-explorer-app

Complete branded application shell for MemberJunction Explorer-style applications. Provides the login screen, authentication flow, workspace initialization, and main application frame.

Overview

Explorer App is the top-level entry point component for MemberJunction Explorer applications. It handles the full application lifecycle: displaying a branded login screen for unauthenticated users, orchestrating authentication via MJAuthBase, initializing the workspace through WorkspaceInitializerService, and rendering the mj-shell component for authenticated users. It also handles OAuth callback routing and error display.

graph TD
    APP["MJExplorerAppComponent\n(<mj-explorer-app>)"] --> AUTH{"Authenticated?"}
    AUTH -->|No| LOGIN["Login Screen\n(MJ Branding)"]
    AUTH -->|Yes| INIT["WorkspaceInitializerService"]
    AUTH -->|OAuth| OAUTH["OAuth Callback\n(router-outlet)"]
    INIT --> SHELL["ShellComponent\n(<mj-shell>)"]
    INIT --> VAL["SystemValidationBanner"]
    INIT --> ERR["Error Display"]
    LOGIN --> AUTHBASE["MJAuthBase\n(Auth Provider)"]

    style APP fill:#7c5295,stroke:#563a6b,color:#fff
    style AUTH fill:#64748b,stroke:#475569,color:#fff
    style LOGIN fill:#2d6a9f,stroke:#1a4971,color:#fff
    style INIT fill:#2d8659,stroke:#1a5c3a,color:#fff
    style SHELL fill:#2d6a9f,stroke:#1a4971,color:#fff
    style VAL fill:#b8762f,stroke:#8a5722,color:#fff
    style ERR fill:#b8762f,stroke:#8a5722,color:#fff
    style AUTHBASE fill:#2d8659,stroke:#1a5c3a,color:#fff
    style OAUTH fill:#64748b,stroke:#475569,color:#fff

Features

Branded login screen: MemberJunction-styled login page with logo and welcome messaging
Authentication integration: Works with any MJAuthBase provider (MSAL, Auth0, etc.)
Workspace initialization: Delegates GraphQL setup, metadata loading, and user validation to WorkspaceInitializerService
OAuth callback handling: Conditional rendering for OAuth callback routes
Error classification: Handles no-roles, no-access, token-expired, and network errors with user-friendly messages
Auth retry: Automatic one-time retry for expired tokens
System validation banner: Displays startup configuration warnings
Bundled assets: Ships with MJ logo, fonts, and SCSS theme files

Installation

npm install @memberjunction/ng-explorer-app

Key Dependencies

Dependency	Purpose
`@memberjunction/ng-bootstrap`	`MJ_ENVIRONMENT` injection token, `MJEnvironmentConfig`
`@memberjunction/ng-explorer-core`	`ShellModule`, `StartupValidationService`, `SystemValidationBannerComponent`
`@memberjunction/ng-auth-services`	`MJAuthBase` authentication abstraction
`@memberjunction/ng-workspace-initializer`	`WorkspaceInitializerService` for workspace setup
`@memberjunction/core`	`SetProductionStatus`, `LogError`

Usage

Module Import

import { MJExplorerAppModule } from '@memberjunction/ng-explorer-app';

@NgModule({
  imports: [
    MJExplorerAppModule.forRoot(environment)  // Pass environment config
  ],
  bootstrap: [/* your bootstrap component */]
})
export class AppModule {}

The forRoot() method provides the MJ_ENVIRONMENT and MJ_STARTUP_VALIDATION tokens.

Template

<mj-explorer-app></mj-explorer-app>

This single component handles everything: login display, authentication, workspace initialization, and the full Explorer shell.

Exported API

Export	Type	Description
`MJExplorerAppModule`	NgModule	Application shell module with `forRoot()` configuration
`MJExplorerAppComponent`	Component	`<mj-explorer-app>` - the main application entry point

Build

cd packages/Angular/Explorer/explorer-app && npm run build

@memberjunction/ng-explorer-core - Shell, routing, and resource components
@memberjunction/ng-workspace-initializer - Workspace initialization service
@memberjunction/ng-explorer-modules - Consolidated module bundle
@memberjunction/ng-auth-services - Authentication abstraction

License

MIT