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

[deerbuster]

this was not fixed. I have the issue today. I force cleared my NPM cache, and create a fresh angular 18.2.12 app, ng add @angular/material, and it chose material v17 again. "found compatible package version: @angular/material@17.0.0"

[JeanMeche]

@deerbuster The fixed was merged (for v19) but wasn't released yet. Also you have a workaround mentionned in Alan last message.

[AngeloCinaWD]

Angular project 18.2.13

ng add @angular/material@18

Not working

npm resolution error report

While resolving: ipovisione-frontend@0.0.0
Found: @angular/core@18.2.13
node_modules/@angular/core
@angular/core@"^18.2.0" from the root project
peer @angular/core@"^18.0.0 || ^19.0.0" from @angular/material@18.2.14
node_modules/@angular/material
@angular/material@"18.2.14" from the root project

Could not resolve dependency:
peer @angular/core@"19.0.1" from @angular/animations@19.0.1
node_modules/@angular/animations
peer @angular/animations@"^18.0.0 || ^19.0.0" from @angular/material@18.2.14
node_modules/@angular/material
@angular/material@"18.2.14" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

No one angular material version is working for me in Angular Project cli18

[YasminHernandes]

Hi guys, I had the same problem with a new Angular 18 project. I installed Angular Material using:

ng add @angular/material

and it gave me the same error message:

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

Without updating anything other than package.json.

I just removed the @angular/material and @angular/cdk dependencies from the package.json and made a new installation declaring the desired version:

ng add @angular/material@18

I tested it and it worked perfectly!

[Hi-AY]

Hello, I was getting this same issue.

As said above, I removed @angular/material and @angular/cdk dependencies from the package.json and made a new installation declaring the desired version,

Now I am getting this,

Cannot read properties of null (reading 'endTag')

Any idea about this?

[YasminHernandes]

Check your code for duplicate or missing end tags.
https://stackoverflow.com/questions/62203754/ng-add-angular-material-fails-with-cannot-read-property-endtag-of-null

[Hi-AY]

It was resolved. Thank you @YasminHernandes !!

[angular-automatic-lock-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.}