Angular Integration

ngCorex provides an Angular CLI integration layer via:

@ngcorex/angular

This package is a thin adapter that wires ngCorex into Angular projects using ng add.

• It does not introduce runtime logic.
• It does not modify Angular components.
• It does not implement styling directives.

All processing remains build-time only.

Installation

Inside an Angular project:

npx ng add @ngcorex/angular

What ng add Does

The schematic performs the following deterministic actions:

1. Adds devDependencies

"@ngcorex/cli": "^<version>"

@ngcorex/css is automatically installed as a transitive dependency of @ngcorex/cli.

ngCorex runs at build-time only, so packages are installed as dev dependencies.

Note: Dependencies are added to package.json but not installed automatically. Run npm run ngcorex:setup to install dependencies and complete setup.

2. Adds CLI Scripts

"scripts": {
  "ngcorex:init": "ngcorex init",
  "ngcorex:build": "ngcorex build",
  "ngcorex:watch": "ngcorex build --watch",
  "ngcorex:setup": "npm install && ngcorex init && ngcorex build",
  "ngcorex:dev": "npm install && ngcorex init && ngcorex build --watch",
  "ngcorex:start": "npm install && ngcorex init && ngcorex build && ng serve"
}

These scripts expose the core CLI inside your Angular project:

• ngcorex:init - Creates tokens.json and ngcorex.config.ts
• ngcorex:build - Generates CSS from tokens (one-time)
• ngcorex:watch - Watches for changes and auto-rebuilds CSS
• ngcorex:setup - Installs dependencies + init + build for quick setup
• ngcorex:dev - Installs dependencies + init + build with watch mode for development
• ngcorex:start - Installs dependencies + init + build + ng serve for complete startup

Smart start Script Modification:

The schematic intelligently modifies the existing start script:

• If start is exactly "ng serve", it becomes "ngcorex build && ng serve"
• If start has a custom value, it remains unchanged
• ngcorex:start is always added as a fallback

3. Updates angular.json

The schematic injects:

src/styles/ngcorex.css

into:

build.options.styles

This ensures generated CSS is automatically included in Angular builds.

What It Does NOT Do

The Angular adapter does not:

• Generate tokens automatically
• Duplicate CLI logic
• Parse Angular templates
• Add runtime services
• Introduce directives
• Modify components

All token generation and validation is handled by @ngcorex/css.

First-Time Setup

After installation, you have two options:

Quick Setup (Recommended)

npm run ngcorex:setup

This will:

1. Install ngCorex dependencies
2. Generate ngcorex.config.ts
3. Generate tokens.json
4. Generate src/styles/ngcorex.css

Alternatively, you can use the watch mode for development:

npm run ngcorex:dev
ng serve

This will:

1. Install ngCorex dependencies
2. Generate ngcorex.config.ts
3. Generate tokens.json
4. Generate src/styles/ngcorex.css
5. Start watching for changes to tokens.json and ngcorex.config.ts
6. Auto-rebuild CSS whenever tokens are modified

Manual Setup

npm run ngcorex:init
npm run ngcorex:build
ng serve

This will:

1. Generate ngcorex.config.ts
2. Generate tokens.json
3. Generate src/styles/ngcorex.css
4. Serve Angular with ngCorex styles included

Note: With manual setup, you’ll need to run npm run ngcorex:build each time you modify tokens.json or ngcorex.config.ts. Alternatively, run npm run ngcorex:watch in a separate terminal for automatic rebuilds, or use npm run ngcorex:dev which combines init + watch.

Architecture

The dependency direction is intentional:

Angular Project
    ↓
@ngcorex/angular
    ↓
@ngcorex/css
    ↓
@ngcorex/cli

The core engine never depends on Angular.

The Angular adapter exists purely to:

• Automate setup
• Reinforce workflow
• Align build output
• Provide CLI integration

Version Alignment Policy

The Angular adapter minor version matches the core engine minor version.

Example:

@ngcorex/css@0.2.x
@ngcorex/angular@0.2.x

This ensures:

• Compatibility
• Predictable behavior
• Deterministic installation

Philosophy

ngCorex in Angular remains:

• Build-time only
• Token-driven
• Deterministic
• Governance-first
• Framework-agnostic at core

Angular integration is reinforcement - not transformation.