Angular material package is added to both dependencies and devDependencies after running npx ng add @angular/material version 21.1.5

npx ng add @angular/material --project app-name

or

npx ng add @angular/material

This behavior is unusual and generally considered as an error or a bug in how the specific version of the command is interacting with your package.json file.

Expected Behavior

Normally, ng add @angular/material is expected to add @angular/material (and related packages like @angular/cdk and @angular/animations) only to the dependencies section of your package.json file.

• dependencies: These are packages required for your application to run properly in a production environment. Angular Material is a UI component library, so it’s a core part of the production application.
• devDependencies: These are packages only needed during the development and testing phases, such as testing utilities or build tools.

How to Fix It

To resolve this issue, you should manually edit your package.json file to ensure the package is only in the correct section:

• Open the package.json file in your project’s root directory.
• Locate the @angular/material entry in the devDependencies section and delete that line.
• Ensure the @angular/material entry (and @angular/cdk, @angular/animations if they also appear incorrectly) remains in the dependencies section.
• Save the package.json file.
• Run npm install (or yarn install) in your terminal to ensure your node_modules directory aligns with the updated package.json structure.

This will correct the configuration and prevent potential issues with package management and production builds.