Athena — mahmoud-consultancy/frontend-setup.md

InterimPlaza Recruitment Portal - Frontend

Ontwikkeld door: GloryLabs Eigenaar: Mahmoud Consultancy B.V. Datum: 6 Oktober 2025

📋 Inhoudsopgave


Project Overzicht

InterimPlaza is een modern recruitment platform voor interim vacatures in Nederland. De frontend is gebouwd met Angular en biedt een gebruiksvriendelijke interface voor het zoeken en filteren van vacatures.

Hoofdfuncties

  • Vacature overzicht - Alle interim opdrachten in ÊÊn overzicht
  • Geavanceerde filters - Filter op provincie, locatie, type en categorie
  • Zoekfunctionaliteit - Zoek in titel, bedrijf en beschrijving
  • Responsive design - Optimaal op desktop, tablet en mobiel
  • Mock data - 8 realistische vacatures voor development

âš ī¸ Kritiek Probleem

Angular 20.3.2 FormsModule Bug - BLOCKED

Status: 🔴 KRITIEK - Ontwikkeling geblokkeerd

Probleem: Angular 20.3.2 heeft een critical bug in de FormsModule waarbij de applicatie crasht met:

TypeError: Cannot read properties of null (reading 'firstCreatePass')
at providersResolver (@angular/forms.js:18597:13)

Root Cause: FormsModule's providersResolver probeert firstCreatePass te lezen van een null TView object. Dit is een framework bug, geen configuratie probleem.

Geprobeerde Oplossingen (ALLE GEFAALD):

  1. ❌ Lazy loading - Error blijft bestaan
  2. ❌ Global FormsModule provider met importProvidersFrom() - Geen effect
  3. ❌ Complete cache clear en rebuild - Error persisteert

Enige Oplossing: Downgrade naar Angular 19

# Step 1: Downgrade Angular packages
npm install \
  @angular/animations@19 \
  @angular/common@19 \
  @angular/compiler@19 \
  @angular/core@19 \
  @angular/forms@19 \
  @angular/platform-browser@19 \
  @angular/platform-browser-dynamic@19 \
  @angular/router@19 \
  @angular-devkit/build-angular@19 \
  @angular/cli@19 \
  --save-exact

# Step 2: Clean everything
rm -rf .angular node_modules/.vite node_modules

# Step 3: Reinstall
npm install

# Step 4: Start development server
npm start

Alternatief: Wacht op Angular 20.3.3+ patch release


Voltooide Features

✅ 1. Provincie/Regio Filter

  • Job model uitgebreid met region (provincie) en city velden
  • Provincie dropdown filter in job-list component
  • Locatie weergave als "stad, provincie"
  • Alfabetisch gesorteerde provincies

✅ 2. Mock Vacatures

8 realistische vacatures van bekende Nederlandse bedrijven:

  • ASML - Senior Java Developer (Veldhoven, Noord-Brabant)
  • Coolblue - Frontend Developer React (Rotterdam, Zuid-Holland)
  • ING - DevOps Engineer (Amsterdam, Noord-Holland)
  • Heineken - Financieel Controller (Amsterdam, Noord-Holland)
  • BAM - Projectleider Bouw (Utrecht, Utrecht)
  • Bol.com - Marketing Manager (Utrecht, Utrecht)
  • Booking.com - Data Scientist (Amsterdam, Noord-Holland)
  • Philips - HR Business Partner (Eindhoven, Noord-Brabant)

✅ 3. Design Updates

  • Header kleur gewijzigd van blauw naar wit
  • Wit-blauwe color scheme (#2563eb accenten)
  • Cleaner, moderne uitstraling matching Astro design
  • Dubbele header/main tags verwijderd

✅ 4. Error Handling & Debugging

  • Custom Global Error Handler met gedetailleerde logging
  • Browser debugging met Kapture MCP tools
  • Volledige error stack trace analyse

Technische Stack

Frontend Framework

  • Angular 20.3.2 âš ī¸ (Moet downgraden naar v19)
  • TypeScript - Type-safe development
  • Vite - Snelle build tool
  • Standalone Components - Modern Angular architectuur

Styling

  • SCSS - Modulaire styling
  • Responsive Design - Mobile-first benadering
  • Color Scheme - Wit met #2563eb blue accenten

State Management

  • Template-driven Forms - FormsModule met [(ngModel)]
  • RxJS - Reactive programming
  • Angular Signals - Modern state management (waar van toepassing)

Development Tools

  • Angular CLI - Project scaffolding
  • Kapture MCP - Browser automation en debugging
  • ESLint - Code quality
  • Prettier - Code formatting

Installatie & Setup

Vereisten

  • Node.js 18+
  • npm 9+
  • Angular CLI 19+

Eerste Installatie

# Clone repository
git clone <repository-url>
cd recruitment-portal

# Installeer dependencies
npm install

# Start development server
npm start

# Navigeer naar
http://localhost:4200/

Environment Variables

Geen environment variabelen nodig voor development - gebruikt mock data.


Development

Development Server

npm start
# Draait op http://localhost:4200/

Build

# Development build
npm run build

# Production build
npm run build:prod

Testing

# Unit tests
npm test

# E2E tests
npm run e2e

Code Quality

# Lint
npm run lint

# Format
npm run format

Project Status

Backend: 100% Compleet ✅

  • REST API volledig operationeel
  • H2 in-memory database
  • Spring Security configuratie
  • Alle endpoints getest

Frontend: 65% Compleet âš ī¸

  • ✅ Component structuur
  • ✅ Routing configuratie
  • ✅ Mock data implementatie
  • ✅ Filter functionaliteit
  • ✅ Provincie/regio filter
  • ✅ Design matching Astro template
  • ❌ BLOCKED: Angular 20 FormsModule bug
  • âŗ Backend API integratie (wacht op bug fix)
  • âŗ Job detail pagina
  • âŗ Applicatie functionaliteit

Debugging Vooruitgang (Huidige Sessie)

  • [x] ✅ Root cause gevonden: Angular 20.3.2 FormsModule bug
  • [x] ✅ Error stack trace volledig geanalyseerd
  • [x] ✅ 3 oplossingen geprobeerd (alle gefaald)
  • [x] ✅ Probleem gedocumenteerd met downgrade instructies

Volgende Stappen

PRIORITY 1: Angular Downgrade

npm install @angular/core@19 @angular/common@19 @angular/forms@19 --save-exact

Priority 2: Na downgrade

  • [ ] Verify dat applicatie werkt
  • [ ] Backend API integratie
  • [ ] Test alle filters
  • [ ] Job detail pagina
  • [ ] Responsive design testing
  • [ ] Production deployment

Gewijzigde Bestanden (Deze Sessie)

Models

  • src/app/models/job.model.ts - Region en city velden toegevoegd

Components

  • src/app/components/job-list/job-list.ts:

    • Region filter properties
    • getMockJobs() met 8 vacatures
    • Direct mock data laden in ngOnInit
    • extractFilterOptions() met regions
    • applyFilters() met region filtering
  • src/app/components/job-list/job-list.html:

    • Provincie dropdown filter
    • Locatie display "stad, provincie"
    • Header/main tags verwijderd
  • src/app/components/job-list/job-list.scss:

    • Header styling verwijderd
    • Container padding aangepast

App Configuration

  • src/app/app.scss:

    • Header wit in plaats van blauw
    • Blue accent #2563eb
    • Background #fafafa
  • src/app/app.config.ts:

    • Custom GlobalErrorHandler
    • importProvidersFrom(FormsModule) toegevoegd
  • src/app/app.routes.ts:

    • Lazy loading (poging tot fix)
    • Direct import (triggerde bug)

Debugging & Troubleshooting

Angular Routing Debuggen

// In app.config.ts
import { withDebugTracing } from '@angular/router';

provideRouter(routes, withDebugTracing())

Cache Problemen

# Clear Angular cache
rm -rf .angular

# Clear Vite cache
rm -rf node_modules/.vite

# Clear all caches
rm -rf .angular node_modules/.vite node_modules
npm install

Browser Console Errors Analyseren

  1. Open DevTools (F12)
  2. Ga naar Console tab
  3. Check voor error stack traces
  4. Gebruik Kapture MCP voor gedetailleerde DOM inspectie

Resources & Links

Documentation

Project Files

  • Backend API: /Users/sarkout/projects/prive/mahmoud-consultancy/backend
  • Frontend: /Users/sarkout/projects/prive/mahmoud-consultancy/frontend/recruitment-portal
  • Maven Settings: /Users/sarkout/.m2/settings.xml

Issue Tracking

  • Angular 20 Bug: Monitor https://github.com/angular/angular/issues
  • Project Tasks: /Users/sarkout/projects/prive/mahmoud-consultancy/02-Taken/Sprint-1-Taken.md

Contact & Support

Development Team: GloryLabs Client: Mahmoud Consultancy B.V.

Voor vragen of ondersteuning, neem contact op met het development team.


Licentie

Š 2025 InterimPlaza | Ontwikkeld door GloryLabs voor Mahmoud Consultancy B.V.


Laatste Update: 6 Oktober 2025 Status: BLOCKED - Angular 20 Bug ⛔ Volgende Actie: Downgrade naar Angular 19

Reacties

Nog geen reacties