@wawjs/ngx-bos

Reusable Angular 22 contracts, services, guards, selectors, pages, and AI guidance for Ngx BOS CRM and business operating system applications.

Current package line: 22.0.0.

App Contract

Ngx BOS apps are browser-only SPAs. They are not SSR, prerender, static SEO, or landing-page templates.

Business apps own:

• routes and layouts
• roles and permissions
• dashboards and workflows
• entity modules, schemas, tables, forms, and detail pages
• environment and API configuration
• branding and deployment values

Import reusable APIs from the package entry point — never from package internals:

import { UserService } from '@wawjs/ngx-bos';

Installation

npm install @wawjs/ngx-bos

Peer dependencies

Angular 22 (@angular/common, @angular/cdk, @angular/core, @angular/forms, @angular/router), the WAW platform packages (@wawjs/ngx-core, @wawjs/ngx-crud, @wawjs/ngx-ace, @wawjs/ngx-fabric, @wawjs/ngx-form, @wawjs/ngx-http, @wawjs/ngx-tinymce, @wawjs/ngx-translate, @wawjs/ngx-ui), and libphonenumber-js. See package.json for exact ranges.

Configuration

Wire the package into your app's providers with ngxBosProvide (alias provideNgxBos). Every field is optional and falls back to DEFAULT_NGX_BOS_CONFIG.

import { ngxBosProvide } from '@wawjs/ngx-bos';

export const appConfig = {
  providers: [
    ngxBosProvide({
      appId: environment.appId,
      url: environment.url,
      cdnUrl: 'https://cdn.webart.work',
      roles: environment.roles,
      userFields: environment.userFields ?? [],
      userForm: environment.userForm ?? [],
      signPath: '/sign',
      profilePath: '/profile',
      defaultUserThumb: 'assets/default.png',
    }),
    // ...other WAW providers
  ],
};

| Option | Default | Purpose | | ------------------ | --------------------------- | ---------------------------------------------------------- | | appId | '' | Application id used for scoped user queries | | url | '' | API base URL, prefixed onto user thumbnails and requests | | cdnUrl | 'https://cdn.webart.work' | CDN base URL | | roles | [] | Employee roles ('admin' is appended internally) | | userFields | [] | Extra user.data.* fields initialized on each user | | userForm | [] | Form component descriptors for the user form | | signPath | '/sign' | Route to redirect to on logout | | profilePath | '/profile' | Route for the signed-in user's profile / avatar link | | defaultUserThumb | 'assets/default.png' | Fallback avatar when the user has no thumbnail |

The resolved config is available through the NGX_BOS_CONFIG injection token.

Exports

• Config: ngxBosProvide / provideNgxBos, NGX_BOS_CONFIG, DEFAULT_NGX_BOS_CONFIG, NgxBosConfig, NGX_BOS_VERSION
• User / auth: UserService, User interface, user const/form, UserSelectorComponent, UserPreviewComponent, UsersComponent, ClientsComponent
• Guards: AuthenticatedGuard, GuestGuard, AdminsGuard
• File: FileSelectorComponent, FilesComponent, file feature contracts
• Form pages: FormComponent, FormsComponent
• Routes: usersRoutes, clientsRoutes, filesRoutes, formRoutes, formsRoutes
• Misc: form components, spider icon, phone pipe

Using package routes

import { usersRoutes, AdminsGuard } from '@wawjs/ngx-bos';

export const routes: Routes = [
  { path: 'users', canActivate: [AdminsGuard], children: usersRoutes },
];

Building

From the workspace root:

npm run build:ngx-bos

AI Guidance

Reusable package guidance ships under ai/ and is available to consuming apps at node_modules/@wawjs/ngx-bos/ai/.