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):
- â Lazy loading - Error blijft bestaan
- â Global FormsModule provider met
importProvidersFrom() - Geen effect
- â 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
- Open DevTools (F12)
- Ga naar Console tab
- Check voor error stack traces
- 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