ionic-framework - 如何在 Ionic 4 中创建一个多应用程序项目？

Question

我尝试按照 ionic 文档在 Ionic 4 中创建一个简单的多应用程序项目，但它不起作用。
https://ionicframework.com/docs/cli/configuration#multi-app-projects
我的配置:

ionic :v4.12.0

角 CLI:7.3.8

节点:10.15.1

npm : 6.9.0

Windows 10

我做了什么 :
我创建了一个目录“monorepo”。
在这个文件夹中，我创建了一个文件 ionic.config.json 并将以下代码粘贴到其中:

{
  "projects": {}
}

在 monorepo 中，我创建了第二个目录:apps。
在此目录中(带有命令提示符)，我编写命令:
ionic 启动“app1”--no-deps
monorepo/ionic.config.json 正确填充了数据:

{
  "projects": {
    "app1": {
      "name": "app1",
      "integrations": {},
      "type": "angular",
      "root": "apps\\app1"
    }
  }
}

但是当我尝试为服务器提供服务时，它不起作用。 ionic serve --project app1返回此错误消息:

> ng run app1:serve --host=0.0.0.0 --port=8100
[ng] Project 'app1' could not be found in workspace.
[ng] Error: Project 'app1' could not be found in workspace.
[ng]     at Workspace.getProject (C:\Users\name\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\core\src\workspace\workspace.js:93:19)
[ng]     at Architect.getBuilderConfiguration (C:\Users\name\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\src\architect-legacy.js:117:41)
[ng]     at RunCommand.runSingleTarget (C:\Users\name\AppData\Roaming\npm\node_modules\@angular\cli\models\architect-command.js:160:45)
[ng]     at RunCommand.runArchitectTarget (C:\Users\name\AppData\Roaming\npm\node_modules\@angular\cli\models\architect-command.js:201:35)
[ng]     at RunCommand.run (C:\Users\name\AppData\Roaming\npm\node_modules\@angular\cli\commands\run-impl.js:14:25)
[ng]     at RunCommand.validateAndRun (C:\Users\name\AppData\Roaming\npm\node_modules\@angular\cli\models\command.js:124:31)
[ng]     at process._tickCallback (internal/process/next_tick.js:68:7)
[ng]     at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
[ng]     at startup (internal/bootstrap/node.js:283:19)
[ng]     at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

[ERROR] ng has unexpectedly closed (exit code 1).

        The Ionic CLI will exit. Please check any output above for error details.

当我查看与错误相关的文件 (workspace.js:93:19) 并执行 console.log 时，我获得了以下信息:

getProject(projectName) {
     this._assertLoaded();

     console.log("this.projectName : " + projectName); // this.projectName : app1
     console.log("\n\nthis._workspace.projects : \n");
     console.log(this._workspace.projects); // this._workspace.projects : app and app-e2e

     const workspaceProject = this._workspace.projects[projectName];

(显示的值在注释中)。
projectName 变量似乎没问题。但可用项目在 this._workspace.projects是 app 和 app-e2e，看起来很奇怪。
我的问题是什么？
我错过了什么 ？

Answer 1

我设法通过替换 angular.json 来编译每app以我的 ionic 项目名称命名的关键字(这里是 app1 )。

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "defaultProject": "app1",                      <-- HERE
  "newProjectRoot": "projects",
  "projects": {
    "app1": {                                    <-- HERE
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app1",                          <-- NOT MANDATORY
      "schematics": {},
      "architect": {
        "build": { ... },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app1:build"        <-- HERE
          },
   ...
}

我想与其将多个 Angular 应用程序放在一个项目结构中，不如重写每个 ionic 项目的 angular.json