Error while migrating from Angular CLI 11 to Angular CLI 12

[shashankvivek]

Current Behavior

I am in the process of upgrading my project from Angular 11 to Angular 12. I have run below commands:

1. nx migrate 12
2. npm install
3. npx nx migrate --run-migrations

I observed that the Angular version was not updated to v12 , so I followed the below steps as suggested in this issue. I continued as :

4. npx nx migrate @angular/core@l12.2.10
5. npm install
6. npx nx migrate --run-migrations
7. npx nx migrate @angular/cli@12.2.10

On step 7 ( npx nx migrate @angular/cli@12.2.10) , I am getting the below error:

Fetching @angular/cli@12.2.10
Fetching @angular/cli@12.2.10

 >  NX   The migrate command failed.


 >  NX   Command failed: npm install @angular/cli@12.2.10

   npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
   npm ERR! Unexpected end of JSON input while parsing near ''

   npm ERR! A complete log of this run can be found in:
   npm ERR!     C:\Users\svi\AppData\Roaming\npm-cache\_logs\2023-06-18T09_20_56_245Z-debug.log

   Pass --verbose to see the stacktrace.

D:\q_repo\qontrol-ui\node_modules\yargs\build\lib\yargs.js:1132
                throw err;
                ^

Error: Command failed: C:\Users\svi\AppData\Local\Temp\tmp-195043C5upLqVEFwD\node_modules\.bin\tao migrate @angular/cli@12.2.10
    at checkExecSyncError (child_process.js:616:11)
    at Object.execSync (child_process.js:652:15)
    at Object.handler (D:\q_repo\qontrol-ui\node_modules\@nrwl\workspace\src\command-line\nx-commands.js:87:25)
    at Object.runCommand (D:\q_repo\qontrol-ui\node_modules\yargs\build\lib\command.js:196:48)
    at Object.parseArgs [as _parseArgs] (D:\q_repo\qontrol-ui\node_modules\yargs\build\lib\yargs.js:1043:55)
    at Object.get [as argv] (D:\q_repo\qontrol-ui\node_modules\yargs\build\lib\yargs.js:986:25)
    at Object.initLocal (D:\q_repo\qontrol-ui\node_modules\@nrwl\cli\lib\init-local.js:24:13)
    at Object.<anonymous> (D:\q_repo\qontrol-ui\node_modules\@nrwl\cli\bin\nx.js:43:18)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 15496,
  stdout: null,
  stderr: null
}

Expected Behavior

The migration to Angular 12 should be completed successfully.

GitHub Repo

No response

Steps to Reproduce

1. nx migrate 12
2. npm install
3. npx nx migrate --run-migrations
4. npx nx migrate @angular/core@l12.2.10
5. npm install
6. npx nx migrate --run-migrations
7. npx nx migrate @angular/cli@12.2.10

Node - v14.15.0
npm - 6.14.8

Nx Report

>  NX   Its time to update Nx 🎉

   For more information, see https://nx.dev/more-concepts/global-nx


>  NX  Report complete - copy this into the issue template

  Node : 14.15.0
  OS   : win32 x64
  npm  : 6.14.8

  nx : Not Found
  @nrwl/angular : 12.0.0
  @nrwl/cli : 12.0.0
  @nrwl/cypress : 12.0.0
  @nrwl/devkit : 12.0.0
  @nrwl/eslint-plugin-nx : 12.0.0
  @nrwl/express : Not Found
  @nrwl/jest : 12.0.0
  @nrwl/linter : 12.0.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.0.0
  @nrwl/web : Not Found
  @nrwl/workspace : 12.0.0
  @nrwl/storybook : Not Found
  @nrwl/gatsby : Not Found
  typescript : 4.2.3

Failure Logs

Failure log file:


284 silly saveTree   | | +-- emoji-regex@8.0.0
284 silly saveTree   | | `-- is-fullwidth-code-point@3.0.0
284 silly saveTree   | `-- through@2.3.8
284 silly saveTree   +-- jsonc-parser@3.0.0
284 silly saveTree   +-- npm-package-arg@8.1.5
284 silly saveTree   | +-- hosted-git-info@4.1.0
284 silly saveTree   | | `-- lru-cache@6.0.0
284 silly saveTree   | |   `-- yallist@4.0.0
284 silly saveTree   | +-- semver@7.3.5
284 silly saveTree   | `-- validate-npm-package-name@3.0.0
284 silly saveTree   |   `-- builtins@1.0.3
284 silly saveTree   +-- npm-pick-manifest@6.1.1
284 silly saveTree   | `-- npm-install-checks@4.0.0
284 silly saveTree   +-- open@8.2.1
284 silly saveTree   +-- ora@5.4.1
284 silly saveTree   +-- pacote@11.3.5
284 silly saveTree   +-- resolve@1.20.0
284 silly saveTree   +-- semver@7.3.5
284 silly saveTree   +-- symbol-observable@4.0.0
284 silly saveTree   `-- uuid@8.3.2
285 verbose stack SyntaxError: Unexpected end of JSON input while parsing near ''
285 verbose stack     at JSON.parse (<anonymous>)
285 verbose stack     at parseJson (C:\Program Files\nodejs\node_modules\npm\node_modules\json-parse-better-errors\index.js:7:17)
285 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-fetch-npm\src\body.js:96:50
285 verbose stack     at processTicksAndRejections (internal/process/task_queues.js:93:5)
286 verbose cwd C:\Users\svi\AppData\Local\Temp\tmp-15016-WszDlQjaFQOc
287 verbose Windows_NT 10.0.22621
288 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "@angular/cli@12.2.10"
289 verbose node v14.15.0
290 verbose npm  v6.14.8
291 error Unexpected end of JSON input while parsing near ''
292 verbose exit [ 1, true ]

### Operating System

- [ ] macOS
- [ ] Linux
- [ ] Windows
- [ ] Other (Please specify)

### Additional Information

x64 win 11
Node - `v14.15.0`
npm - `6.14.8`

[shashankvivek]

My package.json after running above steps:

  "dependencies": {
    "@angular-eslint/eslint-plugin": "2.0.2",
    "@angular-eslint/eslint-plugin-template": "2.0.2",
    "@angular-eslint/template-parser": "2.0.2",
    "@angular/animations": "12.2.10",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "12.2.10",
    "@angular/compiler": "12.2.10",
    "@angular/core": "12.2.10",
    "@angular/forms": "12.2.10",
    "@angular/material": "^11.2.13",
    "@angular/platform-browser": "12.2.10",
    "@angular/platform-browser-dynamic": "12.2.10",
    "@angular/router": "12.2.10",
    "@microsoft/signalr": "^3.1.16",
    "@ngrx/component-store": "11.0.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^5.0.0",
    "@nrwl/eslint-plugin-nx": "12.0.0",
    "@nrwl/linter": "12.0.0",
    "@typescript-eslint/eslint-plugin": "^4.28.2",
    "@typescript-eslint/parser": "^4.28.2",
    "angular-oauth2-oidc": "^10.0.3",
    "cldr-data": "^36.0.0",
    "core-js": "^2.5.4",
    "date-fns": "^2.22.1",
    "guid-typescript": "^1.0.9",
    "lodash-es": "^4.17.21",
    "ng-click-outside": "^7.0.1",
    "qs": "^6.10.1",
    "rxjs": "^6.6.7",
    "shed-css": "^1.4.0",
    "tslib": "^2.2.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.1102.4",
    "@angular/cli": "^11.2.14",
    "@angular/compiler-cli": "12.2.10",
    "@angular/language-service": "12.2.10",
    "@nrwl/angular": "12.0.0",
    "@nrwl/cli": "12.0.0",
    "@nrwl/cypress": "12.0.0",
    "@nrwl/devkit": "12.0.0",
    "@nrwl/jest": "12.0.0",
    "@nrwl/tao": "12.0.0",
    "@nrwl/workspace": "12.0.0",
    "@types/jasmine": "3.6.6",
    "@types/jasminewd2": "^2.0.10",
    "@types/jest": "26.0.8",
    "@types/lodash-es": "^4.17.6",
    "@types/node": "14.14.33",
    "@types/qs": "^6.9.7",
    "codelyzer": "6.0.1",
    "cypress": "^4.1.0",
    "dotenv": "8.2.0",
    "eslint": "^7.30.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-cypress": "^2.11.3",
    "eslint-plugin-prettier": "^3.4.0",
    "husky": "^4.2.5",
    "jasmine-core": "3.6.0",
    "jasmine-spec-reporter": "5.0.2",
    "jest": "26.2.2",
    "jest-preset-angular": "8.3.2",
    "karma": "5.0.9",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage": "2.0.3",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.5.4",
    "ng-packagr": "^11.0.0",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-scss": "^2.0.0",
    "prettier": "2.2.1",
    "prettier-eslint": "^9.0.1",
    "protractor": "7.0.0",
    "ts-jest": "26.4.0",
    "ts-node": "9.1.1",
    "tslint": "6.1.3",
    "tslint-no-focused-test": "^0.5.0",
    "typescript": "4.2.3"
  },

[shashankvivek]

@mandarini Can you please help us out here. This has been a blocker for our project. We already looked over google and could not find any solution

[leosvelperez]

Thanks for reporting this!

Nx 12.0.0 (the version you're migrating to) doesn't support Angular 12. That's why the Angular version was not migrated to it. You need to migrate Nx to a version that supports Angular 12.

As you can see in https://nx.dev/packages/angular/documents/angular-nx-version-matrix#nx-and-angular-version-compatibility-matrix, Nx v12.3.0 is the minimum version that supports Angular v12. The recommended version would be Nx v13.1.4, which is the latest Nx version that supports it.

I'm closing this since the migration was performed to a version of Nx that doesn't support Angular v12. Please migrate Nx to an appropriate version based on the docs shared above.

[github-actions]

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.