如何在Nx v15.9.2工作区中添加Ionic（Capacitor）项目？

1. 安装必要依赖 #

先为工作区添加Angular相关的Nx插件，以及Ionic、Capacitor的核心工具：

npm install -D @nrwl/angular @ionic/cli @capacitor/core @capacitor/cli

2. 生成基础Angular应用 #

Ionic基于Angular构建，先通过Nx生成一个标准的Angular应用作为基础：

nx g @nrwl/angular:app my-ionic-app --style=scss --routing=true

my-ionic-app为自定义项目名称，可按需修改。

3. 将Angular项目转换为Ionic项目 #

进入生成的Angular项目目录，执行Ionic初始化命令：

cd apps/my-ionic-app
ionic init --type=angular --project-id=my-ionic-app

安装Ionic Angular核心依赖：

npm install @ionic/angular @ionic/angular-toolkit

调整项目核心文件 #

• 修改src/app/app.component.ts，替换为Ionic风格的组件结构：

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-root',
  template: '<ion-app><ion-router-outlet></ion-router-outlet></ion-app>',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(private platform: Platform) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // 可添加平台初始化逻辑，比如状态栏配置等
    });
  }
}

• 修改src/index.html，引入Ionic的全局样式和脚本：

<head>
  <!-- 原有内容 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/angular@7.x/dist/ionic.bundle.css">
</head>
<body>
  <app-root></app-root>
  <script src="https://cdn.jsdelivr.net/npm/@ionic/angular@7.x/dist/ionic.bundle.js"></script>
</body>

• 修改项目的project.json（位于apps/my-ionic-app目录下），调整serve任务适配Ionic开发服务器：
  找到targets.serve节点，替换为：

"serve": {
  "executor": "@ionic/angular-toolkit:serve",
  "options": {
    "browserTarget": "my-ionic-app:build",
    "port": 8100
  },
  "configurations": {
    "production": {
      "browserTarget": "my-ionic-app:build:production"
    }
  }
}

4. 集成Capacitor #

在项目目录下初始化Capacitor：

npx cap init my-ionic-app com.yourdomain.myionicapp --web-dir=../../dist/apps/my-ionic-app

com.yourdomain.myionicapp为自定义应用包名，web-dir指向Nx构建后的产物目录。

添加目标平台（以Android为例）：

npm install @capacitor/android
npx cap add android

若需iOS平台，执行npm install @capacitor/ios && npx cap add ios。

配置Nx同步任务 #

在apps/my-ionic-app/project.json中添加Capacitor同步任务，确保构建后自动同步到原生平台：

"cap-sync": {
  "executor": "nx:run-commands",
  "options": {
    "command": "npx cap sync"
  },
  "dependsOn": ["build"]
}

5. 测试项目 #

• 启动Ionic开发服务器：

nx serve my-ionic-app

• 构建项目并同步到原生平台：

nx run my-ionic-app:cap-sync

• 打开原生平台项目：

npx cap open android # 或 npx cap open ios

内容的提问来源于stack exchange，提问作者Lorraine Ram-El