ionic-angular

name	ionic-angular
description	Guides the agent through Angular-specific patterns for Ionic app development. Covers project structure, standalone vs NgModule architecture detection, Angular Router integration with Ionic navigation (tabs, side menu, modals), lazy loading, Ionic page lifecycle hooks, reactive forms with Ionic input components, Angular services for state management, route guards, performance optimization, and testing. Do not use for creating a new Ionic app from scratch, upgrading Ionic versions, general Ionic component usage unrelated to Angular, Capacitor plugin integration, or non-Angular frameworks (React, Vue).
metadata	{"author":"capawesome-team","source":"https://github.com/capawesome-team/skills/tree/main/skills/ionic-angular"}

Ionic Angular

Ionic development with Angular — project structure, Angular-specific components, navigation, lazy loading, forms, and lifecycle integration.

Prerequisites

1. Ionic Framework 7 or 8 with @ionic/angular.
2. Angular 16+ (Angular 17+ recommended for standalone architecture).
3. Node.js and npm installed.
4. Ionic CLI installed (npm install -g @ionic/cli).

Agent Behavior

• Auto-detect architecture. Check src/main.ts for bootstrapApplication (standalone) vs. platformBrowserDynamic().bootstrapModule (NgModule). Adapt all code examples to the detected architecture.
• Guide step-by-step. Walk the user through one topic at a time.
• Adapt imports. For standalone components, import each Ionic component from . For NgModule components, import in the page module.