Angular Development

cyrena.angular

Builds Angular v17+ projects with a strictly enforced global/feature-scoped folder structure. All artifacts are standalone components — no NgModules. Services use inject() not constructor injection. State uses signals (signal, computed, effect). Components use OnPush change detection, input() and output() for communication, and built-in control flow (@if, @for, @switch). The agent will never deviate from this structure.

Angular Web TypeScript Standalone
Details
Package ID
cyrena.angular
App ID
11486102-aa19-43d7-be0c-70aba7d9a51a

Requirements

  • Node.js — installed and on your PATH.
  • Angular CLI — installed globally (npm install -g @angular/cli).
  • Cyréna Angular extension (cyrena.angular) installed and enabled.

Enforced Folder Structure

The extension enforces a strict global / feature-scoped layout. Cyréna will not deviate from this structure — it is a hard constraint, not a guideline.

Global (src/app/)
Folder / FilePurpose
components/Global reusable components.
services/Global shared services.
guards/Global route guards.
pipes/Global custom pipes.
directives/Global custom directives.
models/Global shared models.
interceptors/Global HTTP interceptors.
resolvers/Global route resolvers.
features/Feature modules (see below).
app.component.tsRoot application component.
app.config.tsApplication configuration.
app.routes.tsRoot route definitions.
Feature Modules (src/app/features/feature-name/)

Each feature module mirrors the global structure:

FolderPurpose
components/Feature-scoped components.
services/Feature-scoped services.
guards/Feature-scoped route guards.
pipes/Feature-scoped pipes.
directives/Feature-scoped directives.
models/Feature-scoped models.
interceptors/Feature-scoped HTTP interceptors.
resolvers/Feature-scoped route resolvers.
Note — Global concerns belong under src/app/. Feature-specific code belongs under src/app/features/feature-name/. Keeping to this layout guarantees stable and predictable AI behaviour; Cyréna will not restructure the hierarchy.

Recommended Workflow

  1. 1
    Create the project

    Use the Angular CLI: ng new my-app

  2. 2
    Open Cyréna and start a New Chat.
  3. 3
    Expand the "Web Development" shortcuts.
  4. 4
    Click Angular.
  5. 5
    In the dialog that appears:
    • Browse to your project's angular.json file to establish the project root.
    • Enter a Title to identify this project in the sidebar.
    • Select the AI Connection to use.
    • Toggle any Activated Features you need.
  6. 6
    Press Submit.
  7. 7
    Begin chatting with the AI to generate components, services, routes, or reason about your architecture.
Get Angular CLI Full Documentation