Angular ng serve does't work after migrate to 14.2.2

[JeremieLapert]

Current Behavior

Angular ng serve does't work after migrate to 14.2.2

Expected Behavior

Angular ng serve build and run application

Steps to Reproduce

ng serve

Failure Logs

Environment

NX Report complete - copy this into the issue template

Node : 16.13.2 OS : linux x64 yarn : 1.22.17

nx : 14.2.2 @nrwl/angular : 14.2.2 @nrwl/cypress : 14.2.2 @nrwl/detox : Not Found @nrwl/devkit : 14.2.2 @nrwl/eslint-plugin-nx : 14.2.2 @nrwl/express : Not Found @nrwl/jest : 14.2.2 @nrwl/js : Not Found @nrwl/linter : 14.2.2 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/nx-cloud : Not Found @nrwl/nx-plugin : Not Found @nrwl/react : Not Found @nrwl/react-native : Not Found @nrwl/schematics : Not Found @nrwl/storybook : 14.2.2 @nrwl/web : Not Found @nrwl/workspace : 14.2.2 typescript : 4.7.3

Community plugins: @fortawesome/angular-fontawesome: 0.10.2 @ngneat/transloco: 4.0.0 ng2-charts: 3.0.11 @compodoc/compodoc: 1.1.19 @cypress/schematic: 1.7.0 @ngneat/spectator: 10.0.1

[e-oz]

Works for me (I've migrated to 14.2.2). Try to reproduce on newly-created + migrated workspace.

[rjlopezdev]

Same issue here. I can't serve apps from 14.2.2 update.

> nx run my-app:serve:development

This version of CLI is only compatible with Angular versions ^13.0.0 || ^13.3.0-rc.0,
but Angular version 14.0.1 was found instead.

Please visit the link below to find instructions on how to update Angular.
https://update.angular.io/

 ———————————————————————
 >  NX   Running target "my-app:serve" failed

   Failed tasks:

   - my-app:serve:development

   Hint: run the command with --verbose for more details.

[leosvelperez]

@rjlopezdev you seem to have the wrong version of the Angular CLI installed in the project. Did you run nx migrate latest and nx migrate --run-migrations? That should have updated the @angular/cli package to v14. Please make sure the package has the right version and that is installed.

[leosvelperez]

@JeremieLapert could you share the contents of your nx.json file? Or at least make sure you have the tasksRunnerOptions property set in your nx.json file.

[rjlopezdev]

Thanks for youtr quick reply @leosvelperez !

Yes, I upgrade Nx as always.

>  NX   Report complete - copy this into the issue template

   Node : 16.14.0
   OS   : darwin x64
   npm  : 8.3.1

   nx : 14.2.2
   @nrwl/angular : 14.2.2
   @nrwl/cypress : 14.2.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.2.2
   @nrwl/eslint-plugin-nx : 14.2.2
   @nrwl/express : Not Found
   @nrwl/jest : 14.2.2
   @nrwl/js : 14.2.2
   @nrwl/linter : 14.2.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.2.2
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.2.2
   @nrwl/web : 14.2.2
   @nrwl/workspace : 14.2.2
   typescript : 4.7.3
   ---------------------------------------
   Community plugins:
         @ionic/angular: 6.1.9
         @ngneat/transloco: 4.1.0
         @compodoc/compodoc: 1.1.19
         @jscutlery/semver: 2.25.2
         @nxtend/capacitor: 13.0.0
         @nxtend/ionic-angular: 13.1.0
         @twittwer/compodoc: 1.8.0
         ngx-build-plus: 13.0.1

[leosvelperez]

@rjlopezdev can you make sure your @angular/cli is set to the right version in your package.json file and that version is installed? The error log you posted points that the installed @angular/cli is still using v13 This version of CLI is only compatible with Angular versions ^13.0.0 || ^13.3.0-rc.0, but Angular version 14.0.1 was found instead..

If you do have the right version in the package.json, could you please run an npm install or yarn to make sure it gets installed correctly?

[JeremieLapert]

@JeremieLapert could you share the contents of your nx.json file? Or at least make sure you have the tasksRunnerOptions property set in your nx.json file.

This is my nx.json file

{
  "npmScope": "evercampaign",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "angular.json": "*",
    "package.json": "*",
    "tslint.json": "*",
    ".eslintrc.json": "*",
    "nx.json": "*",
    "tsconfig.base.json": "*"
  },
  "cli": {
    "packageManager": "yarn"
  },
  "generators": {
    "@nrwl/angular:application": {
      "style": "scss",
      "linter": "eslint",
      "unitTestRunner": "jest",
      "e2eTestRunner": "cypress"
    },
    "@nrwl/angular:library": {
      "linter": "eslint",
      "unitTestRunner": "jest"
    },
    "@nrwl/angular:component": {
      "style": "scss"
    }
  },
  "defaultProject": "evercampaign",
  "$schema": "./node_modules/nx/schemas/nx-schema.json"
}

[rjlopezdev]

Yes @leosvelperez , my @angular/cli version is set to 14.0.1 at package.json and re-run npm install, but it does not works :(

[leosvelperez]

@JeremieLapert you are missing the tasksRunnerOptions property. Your nx.json should have something like:

{
  ...
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  }
  ...
}

I'm not sure how you ended up in that state. We haven't got any other report of that property missing, but you can add the above to your nx.json and that should solve the issue.

[leosvelperez]

Yes @leosvelperez , my @angular/cli version is set to 14.0.1 at package.json and re-run npm install, but it does not works :(

Could you provide a repo where this issue can be reproduced? Are you running Nx from a global installation or local?

[JeremieLapert]

@JeremieLapert you are missing the tasksRunnerOptions property. Your nx.json should have something like:

{
  ...
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  }
  ...
}

I'm not sure how you ended up in that state. We haven't got any other report of that property missing, but you can add the above to your nx.json and that should solve the issue.

@leosvelperez : thanks the project build !!! I don't understand how this could work before?

[leosvelperez]

@leosvelperez : thanks the project build !!! I don't understand how this could work before?

I can see the logic to retrieve the task runner changed recently, but I'm not familiar with the reasons behind that. I'll follow it up with the team, but you should be ok now with that property in place. AFAIK, all workspaces get generated with it in place.

[rjlopezdev]

Hi @leosvelperez . I'm experiencing the following issue:

• When I try run npx create-nx-workspace, it points to v13.10.5.

I use Nx Console to serve, and it runs the following command:

• npx nx serve my-app

Could it be the same issue? That npx nx ... points to v13.10.5 ?

[leosvelperez]

@rjlopezdev you seem to have a caching issue. To create a new workspace with latest you can run npx create-nx-workspace@latest. In your project with the issue, you could try deleting node_modules and the package-lock.json and install again.

[Olster]

Yes @leosvelperez , my @angular/cli version is set to 14.0.1 at package.json and re-run npm install, but it does not works :(

I had the same issue because of @angular-builders/custom-webpack which isn't updated for Angular 14 as of yet. Custom-webpack has a dependency to @angular-devkit/architect v0.1302.2 and nx uses @angular-devkit/architect v:0.1400.1 to run non-nx commands (please correct me if I'm wrong here, I took a 5 minute look into the code).

After removing @angular-builders/custom-webpack I don't get "This version of CLI is only compatible with Angular versions ^13.0.0" error anymore.

I checked the version of @angular-devkit/architect with yarn why @angular-devkit/architect

[leosvelperez]

@Olster good point 👍🏻

Nx v14.2.0 comes with Angular 14, therefore any third-party package that's not compatible with Angular 14 can cause issues. @JeremieLapert please make sure you're using packages that are compatible with Angular 14, otherwise, you might not be able to update to it just yet.

For custom webpack configuration, the @nrwl/angular:webpack-browser has support for it https://nx.dev/packages/angular/executors/webpack-browser#customwebpackconfig, so it could be a replacement for any third-party executor that's being used for that.

[markgoho]

I can't get ng serve to work on one computer, but I can on the other. The only difference I'm noticing is:

Working environment includes both babel-webpack and angular-webpack folders

Non-working environment only has babel-webpack

Output from failed ng serve --verbose on non-working environment:

> ng serve "--verbose"

> nx run dashboard:serve --verbose

⠙ Generating browser application bundles (phase: setup)...    [webpack.cache.PackFileCacheStrategy] No pack exists at /workspaces/active-branch-tracker/.angular/cache/14.0.0/angular-webpack/d620d100568736dcf8cfa1df0af46519a0c3866b.pack: Error: ENOENT: no such file or directory, stat '/workspaces/active-branch-tracker/.angular/cache/14.0.0/angular-webpack/d620d100568736dcf8cfa1df0af46519a0c3866b/index.pack'
<t> [webpack.cache.PackFileCacheStrategy] restore cache container: 522.494853 ms
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:4200/, http://127.0.0.1:4200/
<i> [webpack-dev-server] 404s will fallback to '/index.html'
⠙ Generating browser application bundles (phase: building)...
 ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Running target "dashboard:serve" failed

   Failed tasks:

   - dashboard:serve

   Hint: run the command with --verbose for more details.

[rjlopezdev]

Thanks for support @leosvelperez Finally i found out that the error was in a peer-dependency of ngx-build-plus, setup as executor for serve target.

Thank you so much! ❤️

[leosvelperez]

@markgoho without a reproduction would be hard to tell what's going on. If the issue you're having is somehow related to the Angular CLI cache, you could try removing completely the .angular folder and run again. If the issue persists and it's still related to the Angular CLI cache, that's something to ask about in the Angular CLI repo since Nx doesn't create that cache or use it in any way.

[markgoho]

@leosvelperez here is a repo that you can reproduce the issue in:

1. fork the repo
2. open the repo in a GitHub codespace
3. npm install
4. npm run start:app --verbose -- --verbose (this gives both npm verbose and nx cli verbose)

[leosvelperez]

@markgoho thanks for providing the reproduction. Unfortunately, following the steps outlined above didn't error. I got the application running successfully:

I tried both running it in a Github codespace and locally and it works correctly both ways.

[markgoho]

thanks @leosvelperez I ended up doing something a little wild -- I created this workspace back in 2020, which is a handful of major versions ago. A new nx-14 workspace had no problem serving, and so I wondered what the diff was between a migrated-to-14 workspace and a fresh v14 workspace.

I went through and recreated the workspace from scratch, and then re-added all my libs and copied over components/services/etc.

Here's the commit: https://github.com/ideacrew/active-branch-tracker/commit/c7702956abf2bbef7a4fc91d69e49a86a8bcb059#diff-2d2675bb4687601a5c7ccf707455132f90f3516a33716185687e5c41df59ac7d

Most notably, my angular.json was on v1 and I had no project.json files across all my apps/libs. There were also a ton of minor differences between all the jest configs and tsconfigs.

[leosvelperez]

Oh, I see, that explains why I couldn't reproduce it, you have already fixed it. Some things might have been lost between migrations. The v1 angular.json is expected, we don't automatically migrate that just yet. So that's a difference to expect and it shouldn't cause any issues.

I'm glad you were able to solve the issue.

[AhsanAyaz]

"tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  }

@JeremieLapert I ended up exactly in the same state for nx.json. My nx.json looked like this before I added the "tasksRunnerOptions" manually.

{
  "npmScope": "focusdoro",
  "affected": {
    "defaultBase": "undefined"
  },
  "implicitDependencies": {
    "angular.json": "*",
    "package.json": "*",
    "tslint.json": "*",
    ".eslintrc.json": "*",
    "nx.json": "*",
    "tsconfig.base.json": "*"
  },
  "cli": {
    "analytics": false
  },
  "defaultProject": "focusdoro",
  "generators": {
    "@nrwl/angular:application": {
      "linter": "eslint",
      "unitTestRunner": "jest"
    },
    "@nrwl/angular:library": {
      "linter": "eslint",
      "unitTestRunner": "jest"
    },
    "@nrwl/angular:component": {}
  },
  "$schema": "./node_modules/nx/schemas/nx-schema.json"
}

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.