Angular Frontend Stack

Overview

The wiki/entities/b2bpaper frontend is built with Angular 19 (latest stable), using a modern standalone-component architecture. It is built via ng build and deployed as static files served by Nginx. The frontend consumes the Django REST API described in wiki/concepts/django-app-layout.

Core Stack

Component Architecture

Standalone Components

All components are standalone (no NgModules). Each component declares its own imports. This is the Angular 19 default and simplifies the dependency graph.

OnPush Change Detection

All components use ChangeDetectionStrategy.OnPush. This means Angular only checks a component when:

• An @Input() reference changes
• An event originates from the component or its children
• An observable emits (via async pipe)
• ChangeDetectorRef.markForCheck() is called explicitly

ViewEncapsulation.None

All components use ViewEncapsulation.None, allowing Tailwind utility classes to work without encapsulation barriers.

Dependency Injection

Components use inject() function for DI rather than constructor injection. This is the modern Angular pattern.

State Management

• BehaviorSubject in services, exposed via .asObservable()
• No NgRx or other state management library
• takeUntil + _destroy$ pattern for subscription cleanup in components
• take(1) for one-off subscriptions

Project Structure

Feature-based organization (not type-based):

frontend/src/app/
    features/
        surplus/
            surplus-list/
                surplus-list.component.ts
                surplus-list.component.html
            surplus-detail/
            surplus.service.ts
            index.ts          # barrel export
        buyers/
        mills/
        containers/
    shared/
        components/
        pipes/
        directives/
    core/
        services/
        guards/
        interceptors/

Naming Conventions

Build and Deployment

• Build command: ng build (outputs to /var/www/hub/b2bpaper-app/)
• NEVER run ng serve -- only ng build for verification
• Built files served by Nginx at https://b2bpaper.xdvu.com/mvp/app/
• See wiki/concepts/nginx-mvp-routing for the full routing map

Key Rules

• Separate .html template files -- never inline templates
• Barrel exports (index.ts) per feature folder
• Never use any type -- use proper interfaces or unknown
• Tailwind tokens only for styling -- no raw hex colors
• Feature-based folder structure, not type-based

Sources

• raw/notes/techContext -- frontend stack details
• raw/notes/codeGuidelines -- Angular coding standards and naming conventions

Related

• wiki/concepts/django-app-layout -- the backend API this frontend consumes
• wiki/concepts/deployment-urls -- where the frontend is served
• wiki/concepts/nginx-mvp-routing -- how requests reach the frontend
• wiki/summaries/codeguidelines-summary -- full coding standards
• wiki/summaries/techcontext-summary -- broader technical context