5

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 :

  • Use npm install @ionic/app-scripts@latest --save-dev : The @ionic/app-scripts package is deprecated and not updated to angular 14 or 15. When running it, I get Undefined variable standalone_static_library in binding.gyp while trying to load binding.gyp.
  • Delete node_modules and npm install: Doesn't change anything
  • Uninstall and reinstall angular/ionic cli here : Already tried, and didn't change anything
  • Multiple answer are copied, and others are the same: doesn't works
Elikill58
  • 4,050
  • 24
  • 23
  • 45
  • do you have the `https://nodejs.org/en/` lts version installed? since the error mentions that host not found and usually nodejs creates the host and not ionic (angular), ionic (angular) just points to the host but not them who create it.. so check your node js if installed and if it is installed check if its all working (do searches for this point) since sometimes npm works and not the full fuctionalities of it so make sure from node js you can create a server then you can get if the problem is from nodejs or not.. – Mostafa Harb Nov 27 '22 at 11:57
  • @MostafaHarb Yes, I think I've got here, how can I check ? I'm using node v18.7.0. Also, nodejs works to run typescript discord bot, idk if it's helping. Update: I just update nodeJs version to v18.12.1 from official release and I get the exact same issue – Elikill58 Nov 28 '22 at 10:13
  • Do any of these solutions help you? [Ionic 4 - Getting [ERROR] ng has unexpectedly closed (exit code 1)](https://stackoverflow.com/questions/52885720/ionic-4-getting-error-ng-has-unexpectedly-closed-exit-code-1-when-i-run-i) – Simple Dev Nov 28 '22 at 17:56
  • 1
    @SimpleDev after trying those answer, it seems I've got an issue as `python2` command doesn't work, even if I have python2.7 installed (can use it with `py -2.7`) – Elikill58 Nov 28 '22 at 23:08
  • @SimpleDev I tried, and I just edited my post for a complete answer – Elikill58 Nov 29 '22 at 14:17
  • Start a new ionic 6 project. copy your angular code there. OR to add support of ionic to an already angular project use `ng add @ionic/angular` – Fida Khattak Dec 01 '22 at 07:48
  • @FidaKhattak it didn't change anything – Elikill58 Dec 01 '22 at 11:00

6 Answers6

3

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.

Leon Boot
  • 116
  • 7
1

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

ionic serve --project {{project}}

shoop
  • 285
  • 3
  • 11
0

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

0

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

Elikill58
  • 4,050
  • 24
  • 23
  • 45
0

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
Jake d
  • 43
  • 6
0

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.

Peter Boomsma
  • 8,851
  • 16
  • 93
  • 185