bug(update): Cannot find module '@angular-devkit/core/src/workspace/json/reader'

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

Steps to reproduce:

1. ng update @angular/core @angular/cli @angular/material --force

Expected Behavior

What behavior were you expecting to see?

• CDK Migrations run w/o exceptions.

Actual Behavior

What behavior did you actually see?

[error] Error: Cannot find module '@angular-devkit/core/src/workspace/json/reader'
Require stack:
- /Users/splaktar/Git/devintent/xlts/xlts.dev/node_modules/@angular/cdk/schematics/utils/project-tsconfig-paths.js
- /Users/splaktar/Git/devintent/xlts/xlts.dev/node_modules/@angular/cdk/schematics/ng-update/devkit-migration-rule.js
- /Users/splaktar/Git/devintent/xlts/xlts.dev/node_modules/@angular/cdk/schematics/ng-update/index.js
- /private/var/folders/mz/pjttw4vs5xs33pzstmq1h7140000gn/T/angular-cli-packages-JfwbdW/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /private/var/folders/mz/pjttw4vs5xs33pzstmq1h7140000gn/T/angular-cli-packages-JfwbdW/node_modules/@angular-devkit/schematics/tools/index.js
- /private/var/folders/mz/pjttw4vs5xs33pzstmq1h7140000gn/T/angular-cli-packages-JfwbdW/node_modules/@angular/cli/utilities/json-schema.js
- /private/var/folders/mz/pjttw4vs5xs33pzstmq1h7140000gn/T/angular-cli-packages-JfwbdW/node_modules/@angular/cli/models/command-runner.js
- /private/var/folders/mz/pjttw4vs5xs33pzstmq1h7140000gn/T/angular-cli-packages-JfwbdW/node_modules/@angular/cli/lib/cli/index.js
- /private/var/folders/mz/pjttw4vs5xs33pzstmq1h7140000gn/T/angular-cli-packages-JfwbdW/node_modules/@angular/cli/lib/init.js
- /private/var/folders/mz/pjttw4vs5xs33pzstmq1h7140000gn/T/angular-cli-packages-JfwbdW/node_modules/@angular/cli/bin/ng
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/splaktar/Git/devintent/xlts/xlts.dev/node_modules/@angular/cdk/schematics/utils/project-tsconfig-paths.js:21:18)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/splaktar/Git/devintent/xlts/xlts.dev/node_modules/@angular/cdk/schematics/ng-update/devkit-migration-rule.js:22:34)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)

Environment

• Browser(s): Chrome 86
• Operating System (e.g. Windows, macOS, Ubuntu): macOS 10.15.7

Before running ng update @angular/core @angular/cli @angular/material --force:

Angular CLI: 10.1.7
Node: 14.15.0
OS: darwin x64

Angular: 10.1.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.7
@angular-devkit/build-angular   0.1001.7
@angular-devkit/core            7.3.10
@angular-devkit/schematics      7.3.10
@angular/cdk                    10.2.7
@angular/cli                    10.1.7
@angular/fire                   6.0.5
@angular/material               10.2.7
@schematics/angular             10.1.7
@schematics/update              0.1001.7
ng-packagr                      10.1.2
rxjs                            6.6.3
typescript                      4.0.5

After running ng update @angular/core @angular/cli @angular/material --force:

Angular CLI: 11.0.1
Node: 14.15.0
OS: darwin x64

Angular: 11.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.1
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            7.3.10
@angular-devkit/schematics      7.3.10
@angular/cli                    11.0.1
@angular/fire                   6.0.5
@schematics/angular             11.0.1
@schematics/update              0.1100.1
ng-packagr                      11.0.2
rxjs                            6.6.3
typescript                      4.0.5

The CLI DevKit versions reported are v7 because of @schuchard/prettier and some others are using v8 or v9 versions of CLI DevKit:

npm ls @angular-devkit/core
xlts.dev@0.3.0 /Users/splaktar/Git/devintent/xlts/xlts.dev
├─┬ @angular-devkit/build-angular@0.1001.7
│ ├─┬ @angular-devkit/architect@0.1001.7
│ │ └── @angular-devkit/core@10.1.7 
│ ├─┬ @angular-devkit/build-webpack@0.1001.7
│ │ └── @angular-devkit/core@10.1.7 
│ ├── @angular-devkit/core@10.1.7 
│ └─┬ @ngtools/webpack@10.1.7
│   └── @angular-devkit/core@10.1.7 
├─┬ @angular/cli@10.1.7
│ ├── @angular-devkit/core@10.1.7 
│ ├─┬ @angular-devkit/schematics@10.1.7
│ │ └── @angular-devkit/core@10.1.7  deduped
│ ├─┬ @schematics/angular@10.1.7
│ │ ├── @angular-devkit/core@10.1.7 
│ │ └─┬ @angular-devkit/schematics@10.1.7
│ │   └── @angular-devkit/core@10.1.7  deduped
│ └─┬ @schematics/update@0.1001.7
│   ├── @angular-devkit/core@10.1.7 
│   └─┬ @angular-devkit/schematics@10.1.7
│     └── @angular-devkit/core@10.1.7  deduped
├─┬ @schuchard/prettier@3.1.0
│ ├── @angular-devkit/core@7.3.10 
│ └─┬ @angular-devkit/schematics@7.3.10
│   └── @angular-devkit/core@7.3.10  deduped
└─┬ @scullyio/init@1.0.1
  ├── @angular-devkit/core@9.1.12 
  ├─┬ @angular-devkit/schematics@9.1.12
  │ └── @angular-devkit/core@9.1.12  deduped
  ├─┬ @schematics/angular@9.1.12
  │ └── @angular-devkit/core@9.1.12  deduped
  └─┬ schematics-utilities@2.0.2
    ├── @angular-devkit/core@8.3.29 
    ├─┬ @angular-devkit/schematics@8.3.29
    │ └── @angular-devkit/core@8.3.29  deduped
    ├─┬ @schematics/angular@8.3.29
    │ └── @angular-devkit/core@8.3.29  deduped
    └─┬ @schematics/update@0.803.29
      └── @angular-devkit/core@8.3.29  deduped

It looks like the CDK is accessing the wrong version of the CLI DevKit SDK. I think that we had a similar problem in a previous release.

Command output:

$ ng update @angular/core @angular/cli @angular/material --allow-dirty --force
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 54 dependencies.
Fetching dependency metadata from registry...
                  Package "@angular-devkit/build-angular" has an incompatible peer dependency to "karma" (requires "~5.1.0", would install "5.2.3")
    Updating package.json with dependency @angular-devkit/build-angular @ "0.1100.1" (was "0.1001.7")...
    Updating package.json with dependency @angular/cli @ "11.0.1" (was "10.1.7")...
    Updating package.json with dependency @angular/compiler-cli @ "11.0.0" (was "10.1.6")...
    Updating package.json with dependency @angular/language-service @ "11.0.0" (was "10.1.6")...
    Updating package.json with dependency ng-packagr @ "11.0.2" (was "10.1.2")...
    Updating package.json with dependency @angular/animations @ "11.0.0" (was "10.1.6")...
    Updating package.json with dependency @angular/cdk @ "11.0.0" (was "10.2.7")...
    Updating package.json with dependency @angular/common @ "11.0.0" (was "10.1.6")...
    Updating package.json with dependency @angular/compiler @ "11.0.0" (was "10.1.6")...
    Updating package.json with dependency @angular/core @ "11.0.0" (was "10.1.6")...
    Updating package.json with dependency @angular/forms @ "11.0.0" (was "10.1.6")...
    Updating package.json with dependency @angular/material @ "11.0.0" (was "10.2.7")...
    Updating package.json with dependency @angular/platform-browser @ "11.0.0" (was "10.1.6")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "11.0.0" (was "10.1.6")...
    Updating package.json with dependency @angular/router @ "11.0.0" (was "10.1.6")...
  UPDATE package.json (3815 bytes)
✔ Packages installed successfully.
** Executing migrations of package '@angular/cli' **

❯ Replace deprecated library builder '@angular-devkit/build-ng-packagr'.
  Migration completed.

❯ Add 'declarationMap' compiler options for non production library builds.
  Migration completed.

❯ Remove deprecated options from 'angular.json' that are no longer present in v11.
  UPDATE angular.json (9080 bytes)
  Migration completed.

❯ Update workspace dependencies to match a new v11 project.
  UPDATE package.json (3816 bytes)
✔ Packages installed successfully.
  Migration completed.

An unhandled exception occurred: Cannot find module '@angular-devkit/core/src/workspace/json/reader'

[telb99]

Was able to get around this by installing @angular-devkit/core as a dev package with “npm i -D @angular-devkit/core@10” and trying again

[alan-agius4]

Should we at least add @angular-devkit/schematics and @angular-devkit/core to our peerDependencies so that developers would at least get a warning that these need to be installed?

Adding them as peerDependency will require this packages to be installed and listed in the users package.json, which is not ideal. Users shouldn’t be exposed to the packages unless they are developing schematics themselves. Also with NPM 7, unmet peerDepedencies get installed by default and unmeet peer deps are now hard error https://github.com/npm/rfcs/blob/latest/implemented/0025-install-peer-deps.md

I guess an alternative is to break all of our schematics out into a separate package that has the correct dependencies.

That can work, although I don’t think it should be a single package for all the migrations. I think it should be still separated by repo. I’d also assume that this package will be installed by the schematic when the migration runs.

Note: all the above will only be needed until a new version ng-update is available.