Anarchitecture Bricks Docs

Repository documentation hub for packages, guides, and generated references.

Angular Guide

Intent

This is the Angular implementation cookbook for Anarchitecture Bricks. It focuses on practical Angular setup and consumption patterns, with shared design/runtime guidance and HTTP ownership explained in:

Architecture

Easy Mode with Root Exports

Use root package exports for fastest onboarding and lowest host-app wiring cost:

import { provideHttpClient, withFetch } from '@angular/common/http';
import { provideFormsFeature } from '@anarchitects/forms-angular';
import { provideAuthFeature } from '@anarchitects/auth-angular';

export const appConfig = {
  providers: [provideHttpClient(withFetch()), ...provideFormsFeature(), ...provideAuthFeature()],
};

Easy mode is the default for product teams that want stable integration points with minimal setup decisions.

Advanced Mode with Secondary Entry Points

Use layer-specific entry points when you need targeted overrides:

Use advanced mode for custom transport adapters, scoped state lifecycles, or domain-specific feature composition without breaking the easy root-consumption path.

TS Contract Integration

Public HTTP ownership belongs to anarchitecture-contracts, using Zod-first wire schemas, operation definitions and deterministic generated OpenAPI 3.1. Angular clients adopt the same immutable contract version as the verified backend; current @anarchitects/forms-ts, @anarchitects/auth-ts, Identity and Newsletter DTO imports remain the transitional baseline until that migration is implemented.

Keep transport mapping in data-access, orchestration in state and stable UI/feature APIs. Domain models and auth-ts policy semantics stay local. Follow the TS Contracts Guide for compatibility and adoption gates; local generated clients and Prism checks alone do not establish canonical conformance.

Layout Cookbook

For new work, keep domain-specific layout behavior in the Angular domain capability and compose route/page shells in the host application. Use Tailwind utilities for styling; do not introduce a generic runtime layout registry merely to select CSS arrangements.

The legacy Common Angular layout source has been removed under ADR-0003. Published versions remain downloadable for migration only. Follow the Frontend Foundation Guide for current ownership.

Batteries-Included Forms Pages

The preferred route-based forms page path uses AnarchitectsFeatureForm with a forms page preset and optional header inputs. This gives a production-ready contact-form style page with no required consumer CSS patching for the primary use case.

import { Component } from '@angular/core';
import { AnarchitectsFeatureForm } from '@anarchitects/forms-angular/feature';

@Component({
  selector: 'app-contact-form-route',
  imports: [AnarchitectsFeatureForm],
  template: `
    <anarchitects-forms-feature-form
      [formId]="'contact_default'"
      [formVersion]="1"
      [pagePreset]="{
        layoutVariant: 'stacked',
        maxInlineSize: '42rem',
        spacing: 'comfortable',
        actionAlignment: 'end',
      }"
      [pageTitle]="'Contact us'"
      [pageCaption]="'Get in touch and we will respond as soon as possible.'"
    />
  `,
})
export class ContactFormRoute {}

This easy-mode path covers the common scenario:

Advanced Composition With Slots

When you need richer page copy, project custom regions into the form component.

<anarchitects-forms-feature-form [formId]="'contact_default'" [formVersion]="1" [pageTitle]="'Support request'">
  <p anxSlot="app-forms-caption-top">Product support and onboarding</p>
  <p anxSlot="app-forms-caption-top">Billing and enterprise assistance</p>

  <p anxSlot="app-forms-caption-bottom">Typical response in one business day</p>
  <p anxSlot="app-forms-caption-bottom">Priority requests are triaged continuously</p>
</anarchitects-forms-feature-form>

Use inputs and presets for routine cases. Use slot projection when you need multiple caption blocks or fully custom introductory content.

State/Data Access

Auth CASL Guidance

For @anarchitects/auth-angular, keep the authorization split explicit:

Do not treat Angular route metadata as full instance-level authorization. If the app has not loaded the resource yet, the Angular side can only make the coarse "attempt" decision. Nest still remains the final enforcement boundary for instance-sensitive access.

Testing and Docs Workflow

Common Pitfalls

Newsletter integration

See Newsletter integration for both provider examples, Forms-backed signup, OpenAPI and browser/database regression. The migration guide separates reusable capabilities from host policy and app-local data migration.