创建 Ionic 8 & Angular 项目

开发环境

Node.js 环境

安装最新版本的 Node.js LTS ，检查 Node.js 版本：

node -v
v20.19.0

安装最新版本的 pnpm ，检查 pnpm 版本：

pnpm -v
10.9.0

安装 Angular CLI

使用 pnpm 全局安装 Angular CLI：

pnpm add -g @angular/cli

查看安装的 Angular CLI 版本：

ng version

设置 pnpm 为 Angular CLI 默认使用的包管理工具：

ng config -g cli.packageManager pnpm

安装 Ionic CLI

使用 pnpm 全局安装 Ionic CLI：

pnpm add -g @ionic/cli

检查 Ionic CLI 版本：

ionic -v
7.2.1

设置 pnpm 为 Ionic CLI 默认使用的包管理工具：

ionic config set -g npmClient pnpm

创建 Ionic 应用

创建 Ionic 应用

创建一个包含 tabs 组件模板的应用（使用 Capacitor 打包工具，使用 Angular 框架 standalone 模式，不初始化 Git 仓库）：

ionic start <app> tabs --capacitor --type=angular-standalone --no-git

移除 Capacitor

Ionic start 命令会强制安装跨平台打包工具 Capacitor 或者 Cordova，如果不需要，可以在创建完应用后移除。

禁用 Capacitor：

ionic integrations disable capacitor

移除 Capacitor 相关依赖：

pnpm remove @capacitor/app @capacitor/core @capacitor/haptics @capacitor/keyboard @capacitor/status-bar @capacitor/cli

删除相关文件：

rm -rf capacitor.config.ts

移除测试内容

如果项目不需要 E2E 测试和单元测试，可以移除相关依赖和文件。

移除 jasmine、karma、protractor 相关依赖：

pnpm remove @types/jasmine jasmine-core jasmine-spec-reporter karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter

删除相关文件：

rm -rf karma.conf.js tsconfig.spec.json src/test.ts src/**/*.spec.ts

在 angular.json 配置文件中找到 projects.app.schematics 配置项，其值替换为：

{
  "@ionic/angular-toolkit:page": {
    "styleext": "scss",
    "standalone": true,
    "spec": false
  },
  "@ionic/angular-toolkit:component": {
    "styleext": "scss",
    "standalone": true,
    "spec": false
  },
  "@schematics/angular:component": {
    "inlineTemplate": true,
    "inlineStyle": true,
    "style": "scss",
    "skipTests": true
  },
  "@schematics/angular:class": {
    "skipTests": true
  },
  "@schematics/angular:directive": {
    "skipTests": true
  },
  "@schematics/angular:guard": {
    "skipTests": true
  },
  "@schematics/angular:interceptor": {
    "skipTests": true
  },
  "@schematics/angular:pipe": {
    "skipTests": true
  },
  "@schematics/angular:resolver": {
    "skipTests": true
  },
  "@schematics/angular:service": {
    "skipTests": true
  }
}

由于 Ionic 的 schematics 配置长期滞后且处于 bug 中，故除了 page 之外的模板还是推荐使用 ng generate 命令来生成。

在 angular.json 配置文件中找到 cli.schematicCollections 配置项，替换其值为 ["@schematics/angular", "@ionic/angular-toolkit"] 。

在 angular.json 配置文件中找到 projects.app.architect 配置项，删除下面 test 节点配置。

删除 package.json 中的 test 命令。

参考文献