Technology stack

These versions are pinned on purpose. Do not bump Angular, NgRx, RxJS, AG Grid, TypeScript or the test runner unless a task explicitly asks for it. See architectural decisions for the reasoning and the upgrade blockers.

Core

Concern Version Notes

Angular

12.2.15

View Engine-era APIs are still in use in places; the build runs with aot: true. Modules are eagerly loaded — loadChildren appears only in the feature-flag documentation example, not in the live route tables.

TypeScript

4.3.5

strict is not fully enabled; any is common in older code. New code should be explicitly typed regardless.

RxJS

6.5.4 (+ rxjs-compat)

Both pipeable-operator style and legacy deep imports (rxjs/observable/forkJoin, rxjs/observable/ErrorObservable) exist. rxjs-compat is what keeps the legacy paths resolving; removing it is a breaking change across dozens of files.

Zone.js

~0.11.4

Standard. Note NgZone.run(…​) is used explicitly around Google-auth and SSE callbacks, which arrive outside Angular’s zone.

core-js

2.6.12

Legacy polyfill set required by the Node 12 / older-browser target.

State

Package Version Notes

@ngrx/store

4.1.1

Pre-createReducer. Actions are classes; reducers are switch statements; selectors use createSelector and are colocated in the actions files.

@ngrx/effects

4.1.1

@Effect() decorator and this.actions$.ofType(TYPE). createEffect does not exist in this version.

@ngrx/router-store

4.1.1

StoreRouterConnectingModule (no config argument in v4). Effects listen for ROUTER_NAVIGATION and read action.payload.routerState.root.

@ngrx/store-devtools

4.1.1

StoreDevtoolsModule.instrument() is enabled unconditionally, including in production builds.

A custom meta-reducer, storeDebugger in src/app/store-debugger.ts, is registered in StoreModule.forRoot. See state management.

UI

Package Version Notes

@angular/material + @angular/cdk

12.2.13

Re-exported through src/app/pyb-material/pyb-material.module.ts so that components and specs import one module. Theme lives in src/styles/material2-theme.scss.

Bootstrap

4.0.0-beta.2

A beta release, used for grid and utility classes. Coexists with Material; expect specificity conflicts.

ag-grid-community / ag-grid-enterprise / ag-grid-angular

23.x

The workhorse for every large table. Enterprise features are in use, so the enterprise licence matters. ag-grid-enterprise is declared in allowedCommonJsDependencies.

font-awesome 4.7 + material-design-icons

—

Two icon sets in parallel; templates use both <i class="material-icons"> and fa-* classes.

@tinymce/tinymce-angular + tinymce

^4.2.4 / ^5.10.6

Rich-text editing for emails and notes. TinyMCE assets are copied into /tinymce/ by the build (angular.json assets glob).

jQuery + jquery-slimscroll

^3.5.0 / 1.3.8

Assigned to window.$/window.jQuery in app.module.ts and used by the layout/sidebar directives. Not to be extended.

ngx-toastr

6.5.0

The single user-facing notification channel; wrapped by ErrorVisualizationService.

ngx-permissions

8.1.1

Route guard plus *ngxPermissionsOnly / *ngxPermissionsExcept directives. See authorisation.

ngx-infinite-scroll, ngx-order-pipe, ngx-clipboard, ng-click-outside, ngx-credit-cards, payment

—

Narrow single-purpose UI helpers (CRM timeline paging, table ordering, copy buttons, outside-click dismissal, card number formatting/validation).

Data, auth and platform

Package Version Notes

cerialize

0.1.18

Model (de)serialisation and snake_case ↔ camelCase translation. Casing is set globally by DeserializeKeysFrom / SerializeKeysTo, which makes call ordering significant. See data modelling.

jwt-decode

2.2.0

Used by RouteAccessResolver to read the token expiry claim.

@types/gapi, @types/gapi.auth2

—

Google Identity typings for the SSO login component.

elasticsearch

^15.1.1

A browser-side Elasticsearch client, used only by manage/event-rules/events.service.ts to query the em_events index through the event-logger host. Declared in allowedCommonJsDependencies.

ng-event-source

^1.0.14

EventSourcePolyfill with custom headers — required because native EventSource cannot send X-Session-Token. Used by SseService.

lscache

1.1.0

TTL-aware localStorage wrapper; backs the utils reference-data slice (24 h).

ts-md5

1.2.2

Cache-key hashing in HttpCacheLocalStorage.

ngx-cookie-service

^10.1.1

Sets the EVA auth cookie on the shared parent domain.

moment + angular2-moment

^2.29.4

Date arithmetic and relative-time display. Also loaded as a global script.

file-saver

1.3.3

CSV/report downloads. Loaded as a global script and imported.

stacktrace-js

2.0.0

Stack resolution for the error logger.

semver

^5.7.1

Front-end/back-end version comparison in VersionService.

webfontloader

1.6.28

Async font loading.

ngx-resource, @ultimate/ngxerrors, @angular/http

—

Legacy leftovers. @angular/http (the deprecated HttpModule) is still imported in AppModule even though application code uses HttpClient.

Build and tooling

Tool Role

@angular-builders/custom-webpack 12.1.3

Wraps the Angular browser builder so that custom-webpack.config.js can extend the webpack config.

webpack ^4 + assorted loaders

Legacy loader set (raw-loader, json-loader, angular-router-loader, ng-router-loader, jshint-loader, …) — mostly inert but still installed.

postcss + autoprefixer

Vendor prefixing via postcss.config.js.

sass-loader 6.0.6

SCSS compilation; stylePreprocessorOptions.includePaths adds src/assets.

Node 12.21.0 (.nvmrc)

Hard requirement. ng-high-mem scripts raise the heap (--max_old_space_size 8192 for dev, 12288 in deployment/build.sh) because the AOT build of this many components exceeds the default.

ESLint 7 + Prettier 2.5 + Husky 7 + lint-staged 12

Quality gates; see conventions.

Karma 6 + Jasmine 3.6 + Puppeteer + ng-mocks 12.5.1 + ng-bullet

Unit testing; see testing.

Cypress 7.x (+ cypress-iframe, cypress-wait-until, @cypress/skip-test)

E2E; currently unmaintained.

ts-node 5

Runs deployment/set-env.ts to generate src/environments/environment.ts.

junit-report-merger, start-server-and-test, concurrently, ttab

CI report merging and local orchestration (including opening the EVA dev server in a second terminal tab).

Notable build configuration

From angular.json:

  • outputHashing: all, vendorChunk: false, aot: true, output to dist/.

  • Global styles are listed explicitly: styles.scss, bootstrap.scss, font-awesome.scss, layout.scss, loader.scss, material2-theme.scss, theme.scss, ui.scss, plus the two icon-font stylesheets.

  • Global scripts: jquery.min.js, moment.min.js, FileSaver.js.

  • allowedCommonJsDependencies: ag-grid-enterprise, jwt-decode, angular2-moment, elasticsearch, rxjs, payment.

  • Three configurations — production (also swaps environment.ts → environment.prod.ts), staging, development; development is the default.

The production configuration replaces src/environments/environment.ts with environment.prod.ts, but deployment/set-env.ts writes either environment.test.ts or environment.prod.ts depending on ENV_NAME, and setenv.sh then copies that file over environment.ts. The file-replacement and the copy are two mechanisms doing the same job. See environments.