UI-Prototype

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