ionic-angular

Ionic + Angular 应用指南

这是一个 SKILL 文件，不是项目。 切勿在此运行 npm install。创建新项目时，请询问项目路径，或在单独目录中搭建项目（例如 ~/Projects/<app>）。

何时查阅这些参考资料

项目设置：

• 创建新的 Angular Ionic 项目：new-app.md
• 项目结构（文件夹布局）：project-structure.md
• 应用配置（main.ts、app.config.ts）：app-config.md
• 路由（延迟 loadComponent、标签页）：routing.md

页面与导航：

• 引导页守卫（CanMatchFn — 对于延迟加载路由门控，优先于 CanActivateFn）：onboarding-guard.md
• 引导页（视频背景 + Swiper）：onboarding-page.md
• 付费墙页面（RevenueCat）：paywall-page.md
• 标签页导航：tabs-navigation.md
• 设置页面：settings-page.md

跨领域主题：

• Signals（signal、computed、effect、untracked、signal 输入/输出）：signals.md
• 服务（Theme / Onboarding / Ads / Purchases / Notifications）：services.md
• 内置控制流（@if / @for / @switch）：control-flow.md
• 无障碍（ARIA、触控目标、屏幕阅读器）：accessibility.md
• @defer 延迟渲染（付费墙 / 引导页中的大型代码块）：defer-loading.md
• 使用 @ngx-translate/core 实现 i18n：i18n-ngx-translate.md
• 最佳实践（独立组件、分离文件、优先使用 Signals、OnPush、inject()）：best-practices.md
• 命令（build / sync / open）：commands.md

原生插件主题位于 ../ionic-shared/references/ — AdMob、RevenueCat、推送通知、存储和主题相关内容始终链接到此处：

• admob.md
• revenuecat.md
• push-notifications.md
• storage.md
• theming.md
• localization-content.md

必需页面（始终创建）

• 引导页 — 基于滑动操作，包含全屏背景视频 + 渐变叠层。
• 付费墙 — 使用 RevenueCat（每周 / 每年方案），在引导页后立即显示。
• 设置 — 语言、主题、通知、移除广告、重置引导流程。

必需导航

使用 ion-tabs + ion-tab-bar。切勿构建自定义标签栏或引入第三方标签栏库。

必需库

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

硬性规则（Angular 专属）

• ❌ 不要为新页面/组件使用 NgModules — 使用独立组件。
• ❌ 不要在独立组件中使用 IonicModule — 导入单个组件（IonContent、IonButton，等等）。
• ❌ 不要在 @Component 中内联使用 template 或 styles — 始终通过 templateUrl 和 styleUrls 使用单独的 .html、.ts、.scss 文件。
• ❌ 不要使用已弃用的 @angular/http — 使用 @angular/common/http。
• ❌ 不要使用 any 类型 — 使用实际的 TypeScript 类型。
• ✅ 优先使用 Signals 管理响应式状态 — signal()、computed()、effect()。适用时，服务应公开只读 signals — 参见 signals.md。坚持使用稳定的 signal API；在 Angular 功能达到稳定状态前，避免使用标记为“developer preview”/“experimental”的功能（例如 linkedSignal、resource、Signal Forms）。
• ✅ 新组件使用 signal 输入/输出（input()、input.required()、output()）。

报告完成前

npm install
npx ng build
npx cap sync

构建必须成功完成且无错误。每次 Web 构建后，都必须运行 cap sync，然后才能在原生平台上测试。