Angular项目执行ionic serve报错：未知host、port参数的解决方法

问题描述 #

我有一个Angular 14项目，想要用Ionic开发移动端应用，已执行ionic init命令，但运行ionic serve时出现如下错误：

> ng.cmd 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.

项目的package.json内容如下：

{
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --configuration production",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.4",
    "@angular/cdk": "^14.2.3",
    "@angular/common": "^14.2.4",
    "@angular/compiler": "^14.2.4",
    "@angular/core": "^14.2.4",
    "@angular/forms": "^14.2.4",
    "@angular/material": "^14.2.3",
    "@angular/platform-browser": "^14.2.4",
    "@angular/platform-browser-dynamic": "^14.2.4",
    "@angular/router": "^14.2.4",
    "angular-material-dynamic-themes-eli": "^1.0.4",
    "bootstrap": "^5.1.3",
    "flag-icons": "^6.4.4",
    "material-design-icons": "^3.0.1",
    "ngx-editor": "^15.0.0",
    "rxjs": "^7.4.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.4",
    "@angular/cli": "^14.2.4",
    "@angular/compiler-cli": "^14.2.4",
    "@types/jasmine": "^4.3.0",
    "@types/node": "^18.7.23",
    "jasmine-core": "^4.4.0",
    "karma": "^6.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "tslib": "^2.3.1",
    "typescript": "~4.8.4"
  }
}

已尝试以下方案但均无效：

• 执行npm install @ionic/app-scripts@latest --save-dev：该包已弃用，不支持Angular 14，运行时报错Undefined variable standalone_static_library in binding.gyp while trying to load binding.gyp
• 删除node_modules并重新执行npm install：无任何变化
• 卸载并重新安装Angular/Ionic CLI：问题依旧
• 其他类似重复方案：均无效

解决方案 #

1. 安装适配的Ionic Angular工具包 #

@ionic/app-scripts已被弃用，Angular 14+需使用@ionic/angular-toolkit实现Ionic与Angular的集成：

npm install @ionic/angular-toolkit@^9.0.0 --save-dev

（注：@ionic/angular-toolkit 9.x适配Angular 14-16版本）

2. 添加Ionic核心依赖 #

现有Angular项目需引入Ionic核心依赖才能正常使用Ionic功能：

npm install @ionic/angular

3. 调整启动配置或命令格式 #

方式一：修改angular.json固定参数

打开angular.json，找到projects -> app -> architect -> serve -> options，添加host和port配置：

"options": {
  "browserTarget": "app:build",
  "host": "localhost",
  "port": 8100
}

之后直接运行ionic serve即可，Ionic CLI会读取配置中的参数，不再传递未知参数。

方式二：使用正确的参数传递格式

若不想修改配置，可通过--将参数直接传递给Angular CLI，避免参数冲突：

ionic serve -- --host localhost --port 8100

4. 验证版本兼容性 #

确保Ionic CLI版本与Angular版本匹配：

• Angular 14对应Ionic CLI 6.x或7.x
• 查看当前Ionic CLI版本：

ionic --version

若版本不兼容，安装指定版本的Ionic CLI：

npm install -g @ionic/cli@7.x

内容的提问来源于stack exchange，提问作者Elikill58