Converting project from angular to ionic-angular results in error upon serve

Question

我有一个角度项目，我试图使用离子角度将其转换为移动应用程序，我将离子中的 src 文件夹替换为角度项目中的文件夹。

使用命令：ionic serve，出现以下错误：

ionic serve
> ng run app:serve --host=localhost --port=8100
[ng] Error: Unknown arguments: host, port

[ERROR] ng has unexpectedly closed (exit code 1).
        
The Ionic CLI will exit. Please check any output above for error details.

我尝试将 angular.json 中的项目配置重命名为“app”，而不是包含我的文件的文件夹的名称，但这会导致下一个错误：

ionic serve                                                                                        
> ng run app:serve --host=localhost --port=8100
[ng] An unhandled exception occurred: Invalid target: {"project":"base","target":"build"}.
[ng] See "/private/var/folders/mk/p7qr28c12pv_j8bmq4xxt__80000gn/T/ng-wxz3VS/angular-errors.log" for further details.

[ERROR] ng has unexpectedly closed (exit code 127).
        
The Ionic CLI will exit. Please check any output above for error details.

base 是我文件夹的名字

在 angular.json 这是我的配置：

"projects": {
    "base": {
      "root": "src",
      "sourceRoot": "src/base",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": [
              "hammerjs",
              "rxjs",
              "lodash",
              "file-saver",
              "socket.io-client",
              "ng-drag-drop",
              "z-schema",
              "jexl"
            ],
            "outputPath": "dist",
            "index": "src/base/index.html",
            "main": "src/base/main.ts",
            "tsConfig": "src/base/../tsconfig.app.json",
            "polyfills": "src/base/../polyfills.ts",
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/base/assets",
                "output": "/assets"
              }
            ],
            "styles": [
              "src/base/assets/styles/styles.scss"
            ],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/base/../environments/environment.ts",
                  "with": "src/base/../environments/environment.prod.ts"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "base:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "base:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "base:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/base/../test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/base/../polyfills.ts",
            "tsConfig": "src/base/../tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "src/base/assets/styles/styles.scss"
            ],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/base/assets",
                "output": "/assets"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
      }
    }

我在 src 中的目录层次结构是这个

Answer 1

Ionic 提供了关于这个的文档：https://ionicframework.com/docs/intro/cdn#:~:text=For%20adding%20Ionic%20to%20an,Angular%20CLI's%20ng%20add%20feature.&text=This %20will%20add%20the%20needed,as%20add%20the%20styles%20needed.