Angular · TypeScript · Enterprise

Frontend Engineering für reale Unternehmensprojekte

Ein offlinefähiges Nachschlagewerk vom Angular-Einstieg bis zu Architektur, Security, Testing, Spring-Boot-Integration und OpenShift-Deployment.

Angular modernStandalone APIsSignals & RxJSJava 21 Backend

Lernpfad

Foundation

TypeScript, CLI, Components, Templates, Dependency Injection, Routing und Forms.

Enterprise

Feature Domains, State, API-Integration, Security, Error Handling und Design System.

Production

Testing, Performance, CI/CD, Container, OpenShift, Monitoring und Release Readiness.

Angular & TypeScript

Projektstart mit Angular CLI

Für neue Enterprise-Projekte empfiehlt sich eine klare Trennung aus Anwendung, wiederverwendbaren Libraries und Infrastruktur. Standalone Components reduzieren Boilerplate, ersetzen aber nicht automatisch eine gute Domain-Struktur.

npm install -g @angular/cli
ng new enterprise-portal --routing --style=scss --strict
cd enterprise-portal
ng serve --open

Praxisregel: Strict Mode aktiv lassen. Typfehler früh beheben, statt sie durch any zu verdecken.

Standalone Component und Signals

import { Component, computed, signal } from '@angular/core';

@Component({
    selector: 'app-order-counter',
    standalone: true,
    template: `
        <button (click)="increment()">Bestellungen: {{ count() }}</button>
        <p>Doppelt: {{ doubled() }}</p>
    `
})
export class OrderCounterComponent {
    readonly count = signal(0);
    readonly doubled = computed(() => this.count() * 2);

    increment(): void {
        this.count.update(value => value + 1);
    }
}

Pattern: Observer Pattern über reaktive Signals. Der Wert propagiert Änderungen an abhängige Views und Computed Values.

Reactive Forms

Reactive Forms eignen sich für umfangreiche, testbare Geschäftsformulare. Validierung, Fehlertexte und Mapping sollten getrennt behandelt werden.

readonly form = this.fb.nonNullable.group({
    customerNumber: ['', [Validators.required]],
    email: ['', [Validators.required, Validators.email]]
});

Enterprise Architektur

Feature-first Struktur

src/app/
├── core/               # Auth, HTTP, globale Services
├── shared/             # UI-Bausteine, Pipes, Directives
├── features/
│   ├── orders/
│   │   ├── data-access/
│   │   ├── feature/
│   │   ├── ui/
│   │   └── model/
│   └── customers/
└── app.routes.ts

Pattern: Facade Pattern kapselt State und Backend-Kommunikation. Container/Presenter trennt Orchestrierung von Darstellung.

Routing und Lazy Loading

export const routes: Routes = [
    {
        path: 'orders',
        loadChildren: () => import('./features/orders/orders.routes')
            .then(module => module.ORDER_ROUTES)
    }
];

State Management

Signals, RxJS oder NgRx?

Ansatz	Geeignet für	Hinweis
Signals	Lokaler UI- und Feature-State	Einfach, synchron lesbar, wenig Boilerplate
RxJS	Asynchrone Streams, HTTP, Events	Operatoren bewusst und lesbar einsetzen
NgRx	Großer geteilter State, Auditierbarkeit	Nur bei echter Komplexität, nicht reflexartig

Spring Boot Integration

Typed REST Client

export interface OrderDto {
    id: string;
    status: 'NEW' | 'PROCESSING' | 'DONE';
}

@Injectable({ providedIn: 'root' })
export class OrderApi {
    private readonly http = inject(HttpClient);

    findAll() {
        return this.http.get<OrderDto[]>('/api/orders');
    }
}

Pattern: Adapter/Repository Pattern. Die API-Klasse kapselt Transportdetails und verhindert, dass Components HTTP-Wissen enthalten.

Fehlerbehandlung

Backend-Fehler sollten ein stabiles Problem-Details-Format verwenden. Angular Interceptors übernehmen Korrelation, Auth-Header und technische Fehlerbehandlung; fachliche Fehler bleiben beim Feature.

Security

OIDC und Keycloak

Authorization Code Flow mit PKCE verwenden.
Tokens nicht in unsicheren Langzeitspeichern halten.
Route Guards sind UX-Schutz, keine Backend-Autorisierung.
Backend prüft Rollen und fachliche Berechtigungen erneut.

Wichtig: Client-seitige Sichtbarkeit ist keine Sicherheitsgrenze.

Testing

Testpyramide

Ebene	Werkzeug	Ziel
Unit	Vitest/Jest	Pure Functions, Services, Validatoren
Component	Angular TestBed / Testing Library	Inputs, Outputs, DOM-Verhalten
E2E	Playwright	Kritische Nutzerflüsse

DevOps & OpenShift

Production Build und Container

npm ci
npm run test -- --run
ng build --configuration production
docker build -t enterprise-angular:1.0.0 .
docker run --rm -p 8080:8080 enterprise-angular:1.0.0

Für OpenShift sind Readiness/Liveness des Webservers, Cache-Header, CSP, komprimierte Assets und eine unveränderliche Image-Version relevant.

Senior Checklisten

Architecture Review

Domain-Grenzen sind in Ordnern und Routen sichtbar.
Components enthalten keine direkte Transportlogik.
State-Lösung passt zur tatsächlichen Komplexität.
Fehler-, Lade- und Leerzustände sind fachlich beschrieben.
Accessibility und Tastaturbedienung sind geprüft.