如何在 Ionic 4 中创建多应用程序项目？

Question

我尝试按照离子文档在 Ionic 4 中创建一个简单的多应用程序项目，但它不起作用。

https://ionicframework.com/docs/cli/configuration#multi-app-projects

我的配置：

离子：v4.12.0
Angular 命令行界面：7.3.8
节点：10.15.1
npm：6.9.0
Windows 10

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

{
  "projects": {}
}

在 monorepo 中，我创建了第二个目录：apps。在此目录中（使用命令提示符），我编写命令：离子启动“app1”--no-deps

monorepo/ionic.config.json 已正确填充数据：

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

但是当我尝试为服务器提供服务时，它不起作用。

ionic serve --project app1 return 我这个错误信息：

> 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

我通过用我的离子项目的名称（这里是 app1）替换 angular.json 每个 app 关键字来设法编译。

{
  "$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 应用程序放在一个项目结构中，不如重写每个离子项目的 angular.json

如何在 Ionic 4 中创建多应用程序项目？

How to create a multi-apps project in Ionic 4?

ionic-framework

ionic4