# Ionic Angular

> Build a production-ready Ionic Capacitor mobile app with Angular standalone components, lazy-loaded routes, services for cross-cutting concerns, and @ngx-translate/core for i18n. Trigger when the user wants to create an Ionic Angular app, scaffold pages (onboarding, paywall, tabs, settings), or wire RevenueCat / AdMob / push notifications into an Angular Ionic project.

- **Type:** Skill
- **Install:** `agentstack add skill-erkamyaman-ionic-capacitor-skills-ionic-angular`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [erkamyaman](https://agentstack.voostack.com/s/erkamyaman)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [erkamyaman](https://github.com/erkamyaman)
- **Source:** https://github.com/erkamyaman/ionic-capacitor-skills/tree/main/skills/ionic-angular
- **Website:** https://www.skills.sh/erkamyaman/ionic-capacitor-skills

## Install

```sh
agentstack add skill-erkamyaman-ionic-capacitor-skills-ionic-angular
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Ionic + Angular App Guidelines

> **This is a SKILL file, NOT a project.** Never run `npm install` here. When creating a new project, ask for the project path or scaffold in a separate directory (e.g. `~/Projects/`).

## When to consult these references

Project setup:

- **Create a new Angular Ionic project**: [new-app.md](references/new-app.md)
- **Project structure** (folder layout): [project-structure.md](references/project-structure.md)
- **App configuration** (`main.ts`, `app.config.ts`): [app-config.md](references/app-config.md)
- **Routing** (lazy `loadComponent`, tabs): [routing.md](references/routing.md)

Pages and navigation:

- **Onboarding guard** (`CanMatchFn` — preferred over `CanActivateFn` for lazy-route gates): [onboarding-guard.md](references/onboarding-guard.md)
- **Onboarding page** (video background + Swiper): [onboarding-page.md](references/onboarding-page.md)
- **Paywall page** (RevenueCat): [paywall-page.md](references/paywall-page.md)
- **Tabs navigation**: [tabs-navigation.md](references/tabs-navigation.md)
- **Settings page**: [settings-page.md](references/settings-page.md)

Cross-cutting:

- **Signals** (`signal`, `computed`, `effect`, `untracked`, signal inputs/outputs): [signals.md](references/signals.md)
- **Services** (Theme / Onboarding / Ads / Purchases / Notifications): [services.md](references/services.md)
- **Built-in control flow** (`@if` / `@for` / `@switch`): [control-flow.md](references/control-flow.md)
- **Accessibility** (ARIA, touch targets, screen readers): [accessibility.md](references/accessibility.md)
- **`@defer` lazy rendering** (paywall / onboarding heavy chunks): [defer-loading.md](references/defer-loading.md)
- **i18n with `@ngx-translate/core`**: [i18n-ngx-translate.md](references/i18n-ngx-translate.md)
- **Best practices** (standalone, separate files, signals-first, `OnPush`, `inject()`): [best-practices.md](references/best-practices.md)
- **Commands** (build / sync / open): [commands.md](references/commands.md)

Native plugin topics live in `../ionic-shared/references/` — always link there for AdMob, RevenueCat, push notifications, storage, and theme:

- [admob.md](../ionic-shared/references/admob.md)
- [revenuecat.md](../ionic-shared/references/revenuecat.md)
- [push-notifications.md](../ionic-shared/references/push-notifications.md)
- [storage.md](../ionic-shared/references/storage.md)
- [theming.md](../ionic-shared/references/theming.md)
- [localization-content.md](../ionic-shared/references/localization-content.md)

## Required pages (always create)

- **Onboarding** — swipe-based, fullscreen background video + gradient overlay.
- **Paywall** — RevenueCat (weekly / yearly), shown immediately after onboarding.
- **Settings** — language, theme, notifications, remove ads, reset onboarding.

## Required navigation

Use `ion-tabs` + `ion-tab-bar`. Never build a custom tab bar or pull in a third-party tab library.

## Required libraries

```bash
npm install \
  @capacitor/preferences @capacitor/push-notifications \
  @capacitor/splash-screen @capacitor/status-bar \
  @revenuecat/purchases-capacitor @capacitor-community/admob \
  @ngx-translate/core @ngx-translate/http-loader \
  swiper
```

## Hard rules (Angular-specific)

- ❌ NgModules for new pages/components — use **standalone** components.
- ❌ `IonicModule` in standalone components — import the individual components (`IonContent`, `IonButton`, …).
- ❌ Inline `template` or `styles` in `@Component` — always use **separate** `.html`, `.ts`, `.scss` files via `templateUrl` and `styleUrls`.
- ❌ `@angular/http` (deprecated) — use `@angular/common/http`.
- ❌ `any` type — use real TypeScript types.
- ✅ **Prefer Signals** for reactive state — `signal()`, `computed()`, `effect()`. Services should expose readonly signals where it makes sense — see [signals.md](references/signals.md). Stick to **stable** signal APIs; avoid Angular features marked "developer preview" / "experimental" (e.g. `linkedSignal`, `resource`, Signal Forms) until they graduate.
- ✅ Use **signal inputs / outputs** (`input()`, `input.required()`, `output()`) for new components.

## Before reporting done

```bash
npm install
npx ng build
npx cap sync
```

The build must complete without errors. `cap sync` is required after every web build before testing on native.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [erkamyaman](https://github.com/erkamyaman)
- **Source:** [erkamyaman/ionic-capacitor-skills](https://github.com/erkamyaman/ionic-capacitor-skills)
- **License:** MIT
- **Homepage:** https://www.skills.sh/erkamyaman/ionic-capacitor-skills

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-erkamyaman-ionic-capacitor-skills-ionic-angular
- Seller: https://agentstack.voostack.com/s/erkamyaman
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.