bug(*): Issue with `ng add @angular/material` in Angular CLI

[samir-dahal]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

17.3.5

Description

Dear Angular Team,

I encountered an issue while using the Angular CLI to integrate @angular/material into a new project. Here are the steps I followed and the problem I observed:

1. Environment:

   • Angular project created using the Angular CLI.
   • Angular CLI version: [18.2.12].
   • Node.js version: [22.11.0].

2. Issue:

   • I ran the command ng add @angular/material in the terminal.
   • The installation was marked as successful, but the necessary project files (e.g., angular.json, app.config.ts, styles.css, etc) were not modified.
   • Additionally, the following error was displayed:

     Cannot find module '\node_modules\@angular\cli\node_modules\@schematics\angular\private\components.js'
     

I also checked the node_modules folder but didn't find any folder named "private"

Reproduction

StackBlitz link: Sorry, I am working on my local machine, so cannot provide the link here.
Steps to reproduce:

1. Create a new project using angular CLI
2. Add the @angular/material using ng add @angular/material

Expected Behavior

Should properly install the @angular/material package.

Actual Behavior

Error after installing the package.

     Cannot find module '\node_modules\@angular\cli\node_modules\@schematics\angular\private\components.js'

Environment

• Angular: 18.2.12
• CDK/Material: 19.0.0
• Browser(s): Microsoft Edge 131.0.2903.63 (Official build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu):

[json-derulo]

To reproduce:

• Run npx @angular/cli@18 new ng18-app --no-standalone --no-ssr --style=scss
• Navigate to the directory: cd ng18-app
• Run ng add @angular/material

Command output:

➜  ng18-app git:(master) ng add @angular/material
✔ Determining Package Manager
  › Using package manager: npm
✔ Searching for compatible package version
  › Found compatible package version: @angular/material@17.0.0.
✔ Loading package information from registry
✔ Confirming installation
✔ Installing package
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? yes
? Include the Angular animations module? Include and enable animations
UPDATE package.json (1108 bytes)
✔ Packages installed successfully.
Cannot find module '/ng18-app/node_modules/@schematics/angular/private/components.js'

Strangely, Angular v17.0.0 is chosen as the compatible version which seems wrong.

In a freshly generated Angular 19 app, everything seems to work just fine.

Versions:

Angular CLI: 18.2.12
Node: 22.11.0
Package Manager: npm 10.9.1
OS: darwin arm64

Angular: 18.2.13
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.12
@angular-devkit/build-angular   18.2.12
@angular-devkit/core            18.2.12
@angular-devkit/schematics      18.2.12
@angular/cdk                    17.0.0
@angular/cli                    18.2.12
@angular/material               17.0.0
@schematics/angular             18.2.12
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

[crisbeto]

This is likely an issue either with the setup or with the CLI. Transferring to the correct repo.

[alan-agius4]

The problem appears that you have an outdated version of @angular/material installed.

[json-derulo]

@alan-agius4 I think you misunderstood the issue. When creating a fresh Angular 18 non-standalone workspace without Material, after running ng add @angular/material the wrong version of Angular Material is chosen, which probably leads to the described issue. Just try out the reproduction steps I added.

[alan-agius4]

Sorry I misunderstood the issue. As a workaround you can provide the version specifier. Example: ng add @angular/material@18