在现有的 Angular 项目中添加 Ionic 项目答案

【问题标题】：Add Ionic Project within existing Angular Project在现有的 Angular 项目中添加 Ionic 项目
【发布时间】：2020-06-12 07:07:39
【问题描述】：

我有一个现有的 angular 项目，我需要在其中添加一个 ionic 项目，以便我可以使用 ionic serve 运行 ionic 项目并使用 ng serve 运行 angular 项目。

我尝试使用ng add @ionic/angular，在使用ionic init 创建项目后，当我尝试ionic serve 时抛出此错误[ng] An unhandled exception occurred: Project does not exist.[ERROR] ng has unexpectedly closed (exit code 127). The Ionic CLI will exit. Please check any output above for error details.

也试过了，还是不行https://stack247.wordpress.com/2019/03/11/integrate-ionic-in-existing-angular-project/ 为 ionic 创建一个新的项目文件夹，这不是我的要求。

【问题讨论】：

标签： angular ionic-framework angular9 ionic5

【解决方案1】：

您可以使用 NX 工作区将多个应用程序（例如 Angular、Ionic）并排放置。这将为您的存储库实现以下结构：

/apps
  /angular-app
    /src       <-- Same as in a default Angular project
    tsconfig.json
    etc.
  /ionic-app
    /src       <-- Same as in a default Ionic project
    tsconfig.json
    etc.
/libs          <-- Shareable code between apps and other libs
nx.json
package.json
tsconfig.json
etc.

为此，我建议您设置一个全新的 nx 工作区

npx create-nx-workspace NAME

将 NAME 替换为您的存储库名称，并将当前目录更改为新创建的目录。它会询问您是否要初始化默认应用程序。你可以在这里选择一个 Angular 应用程序并复制你所有的 Angular 代码。然后就可以运行了

ng g @nrwl/angular:application ionic-app

之后是（如果您安装了 ionic CLI，否则先运行 npm install -g @ionic/cli 安装它）

ionic init "ionic-app" --type=angular

您需要在根目录内的 ionic.config.json 文件中添加以下配置

{
  "name": "mobile",
  "integrations": {},
  "type": "angular",
  "root": "apps/ionic-app"
}

参考资料：

【讨论】：