Shared Library (ft-common)

ft-common provides the reusable components, services, models, state, guards, interceptors and the AI module shared by the Support Portal and the Management Portal. Both applications consume it as @ft/common (file:dist/ft-common), so it must be built first:

ng build --project=ft-common          # once
npm run dev                           # or: watch-build while developing
ft-common-structure

Secondary entry points

Most top-level folders under projects/ft-common/ are ng-packagr secondary entry points, each imported by its own path. The primary entry point @ft/common (public-api.ts) exports the workspace modules, ft-core.module and app-material.module among them.

Import Content

@ft/common/components

Shared and feature UI components.

@ft/common/services

API access, authentication, configuration, permissions and per-feature services.

@ft/common/models

Interfaces, enums and data models.

@ft/common/store

NgRx actions, reducers, effects and selectors.

@ft/common/guards

Route guards.

@ft/common/interceptors

HTTP interceptors.

@ft/common/directives, @ft/common/pipes, @ft/common/utils

Template helpers and utilities.

@ft/common/ai

The AI assistant module (components, services, interfaces, styles).

Components

Location: projects/ft-common/components/src.

Area Folder

Base and shared building blocks

base, shared, modals, draggable-container

Layout

action-bar, menu, side-bar

Authentication

authentication

Device management

device-info-card, device-profile, device-update

Bulk operations

group-update, file-management

Automation

automation

Monitoring and analytics

monitoring, reports, external-frame-report, superset-dashboard

System and settings

system, settings, user-management, wifi-management

Services

Location: projects/ft-common/services/src.

Service File

ApiService

api.service.ts — builds <server.api>iotw/<path> and issues the HTTP calls.

AppConfigService

app-config.service.ts — loads assets/app-config.json before bootstrap.

AuthenticationService

authentication.service.ts — login, logout, session state.

PermissionsService

permissions.service.ts — user-group permissions, including the Grafana and AI checks.

AppPreloadingStrategy

app-preloading-strategy.ts — custom route preloading.

Feature services

device.service.ts, device-profiles.service.ts, device-update/, automation.service.ts, group-update.service.ts, file-managements.service.ts, monitoring.service.ts, reports.service.ts, superset-dashboard.service.ts, system.service.ts, settings/, user.service.ts

UI and session services

view.service.ts, tabs.service.ts, frames.service.ts, shared.service.ts, connectivity.service.ts, user-inactivity.service.ts, model.service.ts

Models

Location: projects/ft-common/models/src — data models, enums and a large interfaces/ collection re-exported through public-api.ts (users, authentication, permissions, device frame parameters, filter conditions, Grafana paths, settings, and so on).

Store

Location: projects/ft-common/store/src, split into actions/, reducers/, effects/ and selectors/. Feature slices include authentication, automation, connectivity, device profiles, device update, file management, group update, menu, monitoring, notification, pagination, reports, settings, system and tabs. See State & Data Flow.

Guards

Location: projects/ft-common/guards/src.

Guard Purpose

AuthenticationGuard

Redirects between /login and the application shell based on the stored token, and forces the change-password flow when the backend requires it.

PermissionsGuard

Blocks routes the current user group is not allowed to open.

TabsPermissionsGuard

The same check at tab level inside a feature page.

MenuItemsPermissionsGuard

Filters the navigation menu to the permitted items.

Interceptors

Location: projects/ft-common/interceptors/src.

  • TokenInterceptor — attaches Authorization: Bearer <token> from sessionStorage, skips a whitelist of unauthenticated endpoints (login, password reset, assets, app-config.json, selected settings endpoints) and aborts other calls when no token is present.

  • ErrorHandlerInterceptor — turns HTTP failures into store notifications and handles authentication errors centrally.

AI module

Location: projects/ft-common/ai. Provides the assistant chat UI and AIService, whose connection URL comes from the backend setting AIServiceConnectionURL; requests go to <url>ai-agent/…​, which the container proxies (see Nginx Routes). The button is rendered only when the URL is configured and the user group holds the AI assistant permission.

Related pages