FISApp UI

Angular 21 SPA — multi-tenant dashboard with a lazy-loaded PalmVision sub-app for MPOB-standard palm oil fruit bunch (FFB) ripeness detection.

Current Angular version: ^21.1.2
Required Node.js: ^20.19.0 || ^22.12.0 || ^24.0.0

Setup

1. Clone the repository (with submodules)

This project uses Git submodules for shared in-source dependencies (angularlib, dp-ui, fis). Clone recursively to pull them in one step:

git clone --recurse-submodules https://<your-remote>/fisapp-ui.git
cd fisapp-ui

Clone with submodules

git clone --recursive <your-repo-url>

If you already cloned without --recurse-submodules, initialise and fetch the submodules manually:

git submodule update --init --recursive

To pull the latest commits for all submodules after an upstream update:

git submodule update --remote --recursive

2. Install dependencies

npm install

Run npm run clean whenever a new library is added or if you hit Angular cache issues.

3. Start the dev server

npm start
# → http://localhost:4200

The frontend connects to the NestJS backend at https://localhost:3000. Start the backend first:

cd ../server-desktop && npm install && npm run start:dev

Submodules

Alias	Path	Branch
`angularlib/*`	`src/dependencies/angularlib`	`swopt-eLeave`
`dp-ui/*`	`src/dependencies/dp-ui`	`master`
`fis/*`	`src/dependencies/fis`	`swopt-eLeave`

fis-commons is CDN-hosted and requires no local checkout.

Common Commands

npm start                   # Dev server at 0.0.0.0:4200
npm run build               # Production build → dist/fisapp-ui
npm run build:dev           # Dev build → dist/dev
npm run build:prod          # Prod build → dist/rc
npm run build:leave:prod    # Leave-module variant
npm run build:quot:prod     # Quotation variant
npm run build:maf:quot:prod # MAF quotation variant
npm run test                # Karma + Jasmine unit tests
npm run clean               # Clear Angular + npm caches

Troubleshooting

`[ERROR] TS-993004: Unable to import class CommonModule`

A stale Angular build cache inside the angularlib submodule. Run:

npm run clean

Or delete the conflicting folder directly:

# Windows PowerShell
rm -r -force src/dependencies/angularlib/node_modules/@angular

# Linux / macOS
rm -rf src/dependencies/angularlib/node_modules/@angular

PalmVision Sub-App

Lazy-loaded at /src.palm.vision. Provides three inference engines:

Engine	Mode key	Description
Browser ONNX WASM	`local-onnx`	Runs YOLOv8 (`best.onnx`) via `onnxruntime-web` in a Web Worker
Browser TFLite WASM	`local-tflite`	Runs `best_float16.tflite` via TFLite Web API in a Web Worker
NestJS Remote	`remote`	Offloads inference to the `server-desktop` backend over WebSocket

Connection config: src/src.palm.vision/config/config.json

{ "connection": { "uacp": "https://localhost:3000", "uacp_ws": "wss://localhost:3000/socket.io", "uacpEmulation": "on" } }

Detection classes (MPOB standard): Ripe, Unripe, Underripe, Overripe, Abnormal, Empty_Bunch

Code Scaffolding

ng generate component component-name
ng generate directive|pipe|service|class|guard|interface|enum|module

Further Help

Angular CLI: ng help or the Angular CLI docs
Project architecture: see CLAUDE.md

README.md 3.5 KB Riwayat Mentahan