Components: ng-add: schematic breaks if a lower version of CDK is already installed

[Splaktar]

Reproduction

https://github.com/Splaktar/test-blog/tree/angular-material-schematic-failure

Steps to reproduce:

1. ng add @angular/material@next

? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1574 bytes)
✔ Packages installed successfully.
schematics_2.getProjectIndexFiles is not a function

Expected Behavior

Successful schematic execution.

Actual Behavior

Error: schematics_2.getProjectIndexFiles is not a function

Plus project left in a bad/invalid state after failure:

  "dependencies": {
    "@angular/animations": "~9.0.0-rc.7",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "~9.0.0-rc.7",
    "@angular/compiler": "~9.0.0-rc.7",
    "@angular/core": "~9.0.0-rc.7",
    "@angular/forms": "~9.0.0-rc.7",
    "@angular/material": "^9.0.0-rc.6",

@angular/cdk wasn't installed prior to this, but somehow it got installed at ~8.2.3 while @angular/material is rc.6.

In one case, BrowserAnimationsModule was added, in another run it was not.

The custom styles don't get generated into styles.scss.

Environment

Angular CLI: 9.0.0-rc.7
Node: 12.13.0
OS: darwin x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.7
@angular-devkit/build-angular     0.900.0-rc.7
@angular-devkit/build-optimizer   0.900.0-rc.7
@angular-devkit/build-webpack     0.900.0-rc.7
@angular-devkit/core              9.0.0-rc.7
@angular-devkit/schematics        9.0.0-rc.7
@angular/cdk                      8.2.3
@angular/material                 9.0.0-rc.6
@ngtools/webpack                  9.0.0-rc.7
@schematics/angular               9.0.0-rc.7
@schematics/update                0.900.0-rc.7
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

[devversion]

The issue is that @angular/cdk is already installed in the project, but transitively. This is because there seems to be a package used called schematics-utils that depends on the @angular/[email protected] schematic code (_which is not intended for public consumption_).

[Splaktar]

Yikes! I will open an issue with https://github.com/nitayneeman/schematics-utilities. Thank you.

[Splaktar]

Re-opening as we should throw an error here rather than leaving the project in a bad state.

[devversion]

We should do the following:

1. If we detect a lower version of the CDK when running ng add @angular/material, we warn, but continue with the schematic.
2. We always install/add the corresponding CDK version to the Material version that has just been installed by the CLI.

And maybe it would be also good notifying the author of schematics-utils that the current CDK schematic code is not intended for public consumption 😄 Though I somewhat see a reason why it's done that way. We need a canonical place for schematic logic! (in the whole schematic eco system)

[nitayneeman]

Hey,

I just wanted to let you know that the latest schematics-utils version ditches @angular/cdk, so it's not a dependency anymore.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}