Skip to content

CLI can't find global packages or npm. Maybe wrong path config? #4599

Open

Description

@PhilippSonntagORGADATA

Description:
Hello there,
I'm currently trying to set up my dev environment on macOS Catalina 15.15.7. My problem is that the ionic cli
seems to ignore the paths of my angular cli.
Everytime I try to execute the ionic serve command, the cli wants me to install the angular cli because it can't find the ng command. When I try to install it it throws an exception as it can't find the npm command also.

Steps to Reproduce:

  1. Install the latest version of nvm via the zsh on macOS
  2. Install node version 14.15.0 (latest LTS)
  3. Validate the node installation
  4. Install @angular/cli via npm globally npm install -g @angular/cli
  5. Validate @angular/cli using ng --version - Version 10.1.7
  6. Install @ionic/cli via npm globally npm install -g @ionic/cli
  7. Validate @ionic/cli using ionic --version - Version 6.12.1
  8. Navigate to Ionic workspace root
  9. Install all dependencies using npm install -r
  10. Start Ionic/Angular dev server using ionic serve --project=<project-name>
  11. Ionic wants me to install the angular cli as it cannot find the ng command
  12. When I try to install it, Ionic is also unable to find the npm command
  13. ¯\(ツ)/¯

My ionic info:

Ionic:

   Ionic CLI                     : 6.12.1 (/Users/psn_local/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.4.1 (/Users/psn_local/development/git/project-api/Clients/node_modules/@ionic/angular)
   @angular-devkit/build-angular : 0.1001.7 (/Users/psn_local/development/git/project-api/Clients/node_modules/@angular-devkit/build-angular)
   @angular-devkit/schematics    : 10.1.7 (/Users/psn_local/development/git/project-api/Clients/node_modules/@angular-devkit/schematics)
   @angular/cli                  : 10.1.7 (/Users/psn_local/development/git/project-api/Clients/node_modules/@angular/cli)
   @ionic/angular-toolkit        : 2.3.3 (/Users/psn_local/development/git/project-api/Clients/node_modules/@ionic/angular-toolkit)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.15.0 (/Users/psn_local/.nvm/versions/node/v14.15.0/bin/node)
   npm    : 6.14.8
   OS     : macOS Catalina

Other Information:
Things I already tried

  1. Installation as another user
  2. Installation of Node via the installer from the official website
  3. Installation of Node via Homebrew
  4. Installation of Node via nvm
  5. Using of pnpm for global and local packages (with updated configs of ionic and ng)
  6. Setting an alias for the ng command like here
  7. Manually adding PATHS to the .zshrc file of the user

Activity

  1. changed the title [-]CLI uses wrong paths[/-] [+]CLI can't find global packages or npm. Maybe wrong path config?[/+] on Oct 30, 2020
  2. PhilippSonntagORGADATA commented on Nov 13, 2020

    @PhilippSonntagORGADATA
    Author

    Can somebody help me here? This actively prevents me from using the cli.
    The $PATH environment variable is correctly set as it displays when I'm printing it out.

    /Users/psn_local/.nvm/versions/node/v14.15.0/bin:
    is in my path which contains the binaries of
    ionic ionic-lab ng node_modules npx pnpx tsc webpack-cli ionic-cli-scripts ionic-v1 node npm pnpm preact tsserver webpack-dev-server.

    EDIT: Found the error, going to submit a PR.

  3. sonntag-philipp commented on Nov 13, 2020

    @sonntag-philipp

    It was an error in my project ionic.config.json. I switched from Windows to macOS and didn't notice the config used windows paths with backslashes. I think this error message is very misleading.

  4. imhoffd commented on Nov 13, 2020

    @imhoffd
    Contributor

    What exactly did you have in ionic.config.json that caused this issue?

  5. sonntag-philipp commented on Nov 13, 2020

    @sonntag-philipp
    {
        "defaultProject": "first-project",
        "projects": {
            "first-project": {
                "name": "First Project",
                "integrations": {},
                "type": "angular",
                "root": "projects\\first-project"
            },
            "second-project": {
                "name": "Second Project",
                "integrations": {},
                "type": "angular",
                "root": "projects\\second-project"
            },
            "third-project": {
                "name": "Third Project",
                "integrations": {},
                "type": "angular",
                "root": "projects\\third-project"
            }
        }
    }

    I had to change the names but this was exactly the structure. The paths in the root properties were made on windows which didn't work on macOS.

  6. imhoffd commented on Nov 13, 2020

    @imhoffd
    Contributor

    Ahh, so the ENOENT was coming from a missing cwd, I'm guessing.

    I'm wondering if it might be better to validate the project directory exists before we even attempt to spin up the serve CLI. I looked at your PR and realized we'd have to handle the same error in the build CLI and anywhere else we use that project directory as the cwd of the subprocess.

  7. sonntag-philipp commented on Nov 13, 2020

    @sonntag-philipp

    Yeah exactly, sorry for missing out that information.

    My first attempt was also to check the cwd, but I wasn't sure if other parameters could cause this error too, so I just ended up checking the existance of the cli command itself.
    I don't know if I can figure out all positions where this has to be fixed, but I could modify my changes if they are still needed.

  8. imhoffd commented on Nov 13, 2020

    @imhoffd
    Contributor

    I believe your PR will only realistically fix this specific issue: that the subprocess can emit an ENOENT error because of a missing cwd. Since that is the case, the logic may be simpler if we just check if that directory exists beforehand.

    I thought about this a bit more and I think you were pretty close. We probably do want this check to exist when we attempt to serve/build/generate.

    Here are some starting points:

    I can take a look too, but it will be some time before I dig in. I'm mostly focused on Capacitor these days. Bugs in the Ionic CLI are rare, and this one looks like it will only affect devs who are using multiapp and make a typo in the project paths.

    If you intend to continue with a fix, let me know if you have any questions! I'd be happy to answer them.

  9. sonntag-philipp commented on Nov 21, 2020

    @sonntag-philipp

    Hej there,
    finally found some time to investigate. To prevent any false configurations, I implemented a validation for integration and project roots. I think this will handle most of the possible errors. Thanks for the help :)

    When the directory is not accessible, the CLI will throw an exception like this:
    image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions