Overview

A production-ready Angular 21 preset that configures:

• ✅ Standalone Architecture
• ✅ PrimeNG 21 auto-install
• ✅ TailwindCSS 4 integration
• ✅ Environment automation
• ✅ Spanish / English support
• ✅ Enterprise folder structure
• ✅ Admin layout starter

Installation

ng add @keonai/primeng-standalone

Installation Modes

You can install different configuration levels:

Structure Only

Creates folder architecture without modifying configuration.

ng add @keonai/primeng-standalone --mode=structure

Includes:

• core/
• modules/
• shared/
• base folder layout

No PrimeNG or Tailwind configuration.

Full Setup

Creates structure + base Angular configuration.

ng add @keonai/primeng-standalone --mode=full

Includes:

• Folder structure
• app rewrite
• base routes
• environment setup
• gitignore updates

Enterprise (Default)

Full enterprise configuration:

ng add @keonai/primeng-standalone

Includes:

• PrimeNG 21 installation
• TailwindCSS 4 setup
• PostCSS config
• Angular.json updates
• Admin layout starter
• Shared PrimeNG module
• Environment auto-generation
• Spanish / English option
• App rewrite
• Locale configuration

Language Support

During installation you can choose:

• English (default)
• Spanish (es-CO)
• Multilingual + internationalization (English / Spanish)

If Spanish is selected:

• Angular LOCALE_ID configured
• PrimeNG translations applied
• primeng-es.config.ts generated

If Multilingual + internationalization is selected:

• App i18n service generated
• Standalone translate pipe generated
• Standalone translateContent pipe generated for manually mapped database content
• Reusable language switcher generated
• English and Spanish app translation dictionaries generated
• Angular locales registered for en-US and es-CO
• LOCALE_ID connected to the i18n service
• PrimeNG translations switch with the active language
• Generated admin layout uses app translations
• Language switcher uses English and Spanish flag buttons

Optional Modules

During installation the schematic asks which feature modules should be created:

• Public module with layout and home example
• Admin module with layout and dashboard example
• Auth module with login example
• Enterprise module for business workflows
• Customers module for customer-focused projects

Selected modules are wired into src/app/modules/modules.routes.ts and include standalone example pages so you can verify routing immediately.

The auth module generates standalone full-screen pages:

• Login
• Register
• Forgot password
• Recover password

Core Services

The preset generates:

• BaseHttpService with JSON headers, bearer token support, client IP header support, and typed HTTP helpers.
• UtilsService with router navigation and localStorage helpers.

The installer asks for a data access strategy:

• REST API only: generates BaseHttpService
• GraphQL only: generates BaseHttpGraphqlService
• REST API + GraphQL: generates both services

If GraphQL is selected, the environment generator adds GRAPHQL_URL.

Tailwind Integration

Automatically configures:

• tailwindcss
• @tailwindcss/postcss
• tailwindcss-primeui
• SCSS integration
• Custom breakpoints

Environment Automation

Generates:

• .env
• .env.template
• scripts/envs.js
• scripts/keonai-health.js

Runs automatically on:

npm start
npm run build

Manual automation commands:

npm run keonai:env
npm run keonai:health

keonai:env validates required environment variables before writing Angular environment files. keonai:health checks that the generated files and required dependencies are present.

Required environment variables:

• API_URL
• IP_URL
• GRAPHQL_URL when GraphQL is selected

Generated Structure

src/
 ├── app/
 │   ├── core/
 │   ├── modules/
 │   ├── shared/
 │   └── app.config.ts
 │
 ├── assets/
 │   ├── styles.scss
 │   └── tailwind.css
 │
 ├── environments/
 │
scripts/
 └── envs.js

Requirements

• Angular 21+
• Standalone project

License

MIT