CODEWITHSUNDEEP
angularionic-framework
Elikill58
Elikill58

Reputation: 4908

ionic serve command failed to find argument

I have an angular project and I want to use ionic for mobile. I did ionic init.

When I run the command ionic serve, I get this error:

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

Here is my 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"
  }
}

How can I fix the host/port missing arguments ?

After a comment of SimpleDev, I tried all answer here :

Upvotes: 10

Views: 3288

Answers (8)

Gustavo Rodriguez
Gustavo Rodriguez

Reputation: 1

The solution that worked for me was to modify the angular.json by changing the name of the app, setting it as 'app' in the following way:

{
  "projects": {
      "app": {
         "projectType": "application",
         "schematics": {
            "@schematics/angular:component": {
                "style": "scss"
            }
         }
      }
   }
}

Upvotes: 0

Ramstack
Ramstack

Reputation: 21

In my case, I had to do ionic init as it was a existing project and it worked

Upvotes: 0

shoop
shoop

Reputation: 456

What worked for me was specifying the project name as you would in the angular cli with

ionic serve --project {{project}}

Upvotes: 4

Peter Boomsma
Peter Boomsma

Reputation: 9808

Instead of renaming the app or changing the script (which didn't work for me) I updated the ionic.config.json:

the <app-name> value was incorrect for me, it was app. So I changed it to the correct name app-name.

{
  "defaultProject": "app-name",
  "projects": {
    "app-name": {
      "name": "app-name",
      "type": "angular"
    }
  }
}

Now ionic capacitor run android -l runs as expected.

Upvotes: 2

Jake d
Jake d

Reputation: 83

Building on Leon Boot's answer I added a script to my package.json to run it my application. I didn't want to rename my application.

The ionic serve command is itself just a script that outputs as:

 ng.cmd run app:serve --host=localhost --port=8100

The app part is just the name of the application that it's going to serve. I tried finding some config file setting for ionic that controls this value, but I didn't find anything in the documentation for ionic serve, or the configuration file.

I worked around this limitation by making my own script. I copied the output from the ionic serve command, to a script and changed app to the name of my application. Now my packages.json file has this "ionic:serve" script:

 {
  "name": "my-application-name",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "ionic:serve": "ng.cmd run my-application-name:serve --host=localhost --port=8100"
  },...

For your application replace my-application-name with the name of your application.

Now run this script instead using ionic serve:

npm run ionic:serve

Upvotes: 1

Majid Maddah
Majid Maddah

Reputation: 57

It's a simple and easy way i do every project of angular for ionic.

  1. Create new ionic project with ionic start projectName
  2. Delete src folder of ionic
  3. Copy paste src of angular
  4. Install angular module you want to install on the ionic project

If you want run ionic project on angular project it has a lot of error

Upvotes: 0

Leon Boot
Leon Boot

Reputation: 136

I have been able to fix this issue for a project I'm working on, after experiencing just this issue. It seems that the app part in app:serve is dynamic and relates to the name of your angular project as defined in angular.json. The ionic CLI tool seems to assume this is always app, even though the installer has added quite a few ng commands to angular.json using the project name it found in this same angular.json file. What fixed the issue for me is renaming the project to app by editing the angular.json config:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "projectType": "application",

In the above example,myapp should be changed to app. Search for other occurrances of myapp as well, you'll find a few myapp:build, myapp:serve`, etc. commands as well. Those should be renamed as well.

Now, when I run ionic serve I get no errors and the Angular server actually starts.

Upvotes: 5

Aymen Missaoui
Aymen Missaoui

Reputation: 122

I hope this solution can help you:

  1. npm cache clean --force

  2. npm uninstall -g @angular/cli

  3. npm uninstall -g @ionic/cli

  4. npm install -g @angular/cli

  5. npm install -g @ionic/cli

Upvotes: 0

Related Questions