@moatamed-sce/features

The SCE Platform application layer: the smart pages, dashboard route trees and public shell that make up the SCE Marketplace app, packaged so another Angular app can mount whole sections of the product rather than rebuild them.

Status — cannot be installed from npm today

This package declares @moatamed-sce/shared-state as a peer dependency, and shared-state is not published on npmjs.org. Installing @moatamed-sce/features from the public registry therefore fails to resolve its peers. Until shared-state ships, this package is usable only from inside the SCE monorepo.

The combination that does work from npm today is @moatamed-sce/core + @moatamed-sce/ui-components.

What's in it

Almost everything this package exports is a route tree — a lazy-loadable Routes array that brings a whole section of the product with it.

• Shells — publicRoutes and the PublicShellComponent, with ScePublicHeaderComponent, ScePublicFooterComponent and SceLandingAuthAreaComponent; dashboardRoutes for the authenticated dashboard; errorRoutes for the error pages.
• User management — usersRoutes, internalUsersRoutes, individualUsersRoutes, accountUsersRoutes.
• Entities and offices — entitiesRoutes, entityProfileRoutes, officesRoutes, officeProfileRoutes.
• Requests — contactRequestsRoutes, dataRequestsRoutes, updateRequestsRoutes.
• Objections, ratings and lookups — objectionsRoutes, ratingsRoutes, lookupsRoutes.
• Contracts — documentContractRoutes and requestContractRoutes, re-exported from @moatamed-sce/feature-contracts for convenience.
• Services — PublicLoginIntentService, which carries the "what was the user trying to do before we asked them to log in" intent across the login flow.

These are smart components: they inject stores and API services, dispatch NgRx actions and talk to the SCE backend. If you want presentational building blocks with no such coupling, you want @moatamed-sce/ui-components instead.

Install

Once shared-state is published:

npm install @moatamed-sce/features @moatamed-sce/feature-contracts @moatamed-sce/shared-state @moatamed-sce/ui-components @moatamed-sce/core
ng add @moatamed-sce/core

Peer dependencies

Angular 21, @ngrx/store 21, @ngrx/effects 21, PrimeNG 21, @ngx-translate/core 18, RxJS 7.8, and the SCE packages core, ui-components, shared-state and feature-contracts. motion is an optional peer used by the animated pages.

Quick start

Mount the route trees lazily — never import them eagerly:

import { Routes } from '@angular/router';

export const appRoutes: Routes = [
  {
    path: '',
    loadChildren: () => import('@moatamed-sce/features').then(m => m.publicRoutes),
  },
  {
    path: 'dashboard',
    loadChildren: () => import('@moatamed-sce/features').then(m => m.dashboardRoutes),
  },
  {
    path: 'offices',
    loadChildren: () => import('@moatamed-sce/features').then(m => m.officesRoutes),
  },
];

These pages assume the SCE application shell: the NgRx feature stores from @moatamed-sce/shared-state registered, core's API services pointed at an SCE backend, and the global stylesheet cascade wired (ng add @moatamed-sce/core handles the last part).

Translations are not included

The published tarballs ship no i18n JSON. Every page label is a translation key; without your own ngx-translate ar.json / en.json, the pages render raw keys such as DASHBOARD.TITLE.

Docs

• Consuming the packages in an external app
• Design tokens
• Component catalog

License

MIT