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, while shared design/runtime guidance and TS contract ownership stay canonical 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

Contract ownership remains in TS packages:

Angular consumers (@anarchitects/forms-angular, @anarchitects/auth-angular) map TS contracts in data-access and state, then expose stable UI/feature APIs. For contract ownership, change workflow, and compatibility policy, follow TS Contracts Guide.

Layout Cookbook

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