Trying to install @angular/material get this error Data path "" should NOT have additional properties(styles)

Question

As the title says i cannot install material in my project, i have searched in google for many hour but it is not been possible to find an answer, i have found many similar problems but none like mine. After execute this command ng add @angular/material a message is thrown.

An unhandled exception occurred: Workspace config file cannot be loaded: /Users/myuser/Documents/desarrollos/CODIGO/gatewey/angular.json Schema validation failed with the following errors: Data path "" should NOT have additional properties(styles). See "/private/var/folders/qz/hsf9v7rx6yz2q1gsz56k3czh0000gn/T/ng-GYq7Rz/angular-errors.log" for further details.

and inside the angular-errors.log it says

[error] Error: Workspace config file cannot be loaded: /Users/myuser/Documents/desarrollos/CODIGO/gateway/angular.json Schema validation failed with the following errors: Data path "" should NOT have additional properties(styles). at Object.getWorkspace (/Users/myuser/Documents/desarrollos/CODIGO/gateway/node_modules/@angular/cli/utilities/config.js:$ at processTicksAndRejections (internal/process/task_queues.js:93:5) at async AddCommand.validateScope (/Users/myuser/Documents/desarrollos/CODIGO/gateway/node_modules/@angular/cli/models/co$ at async AddCommand.validateAndRun (/Users/myuser/Documents/desarrollos/CODIGO/gateway/node_modules/@angular/cli/models/c$ at async Object.runCommand (/Users/myuser/Documents/desarrollos/CODIGO/gateway/node_modules/@angular/cli/models/command-r$ at async default_1 (/Users/myuser/Documents/desarrollos/CODIGO/gateway/node_modules/@angular/cli/lib/cli/index.js:62:31)

i had node 12.x.x LTS and angular 9.0 to try to fix it i did the following updated node to 14.16.0 LTS and ng update @angular/core@10 @angular/cli@10 to update angular.

i have also run npm audit fix, npm cache clear, npm cache verify before and after the update.

running on macOs big sur. Thank you.

Answer 1

I did a small example with a new project created with jhipster, and checked the angular.json file created at the root of the project and it turns out that the file was containing this fragment

  "styles": [],

so i deleted it and run again

ng add @angular/material

and the problem was gone.

Answer 2

Let's try to do this together and step by step. I will go over every step locally, and it should work for you as well.

Let's first make sure we're running the same node and npm versions.

$ node --version
v15.9.0
$ npm --version
7.5.3

Let's make sure now that we have no previous versions of angular-cli installed on our machine:

$ npm -g list
...
├── @angular/cli@11.2.2
└── npm@7.5.3

Since I have a version installed, I'd first like to remove it.

$ npm uninstall -g @angular/cli

Okay, now let's install a fresh version of @angular/cli

npm install -g @angular/cli

Now, let's create a new project:

ng new my-dream-app
# yes
# yes
# CSS

Let us further CD into it, and make sure we're running

cd my-dream-app
ng serve

You should be able to see it running now.

Okay, and now for angular material. Stop the server, and let's add this dependency.

ng add @angular/material
# Indigo pink
# Yes
# Yes

Let's run the server again:

ng serve

Let's make sure we're running by adding the following to app-module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    // other imports 
    MatSliderModule,
  ],

And then change our HTML app.component.html to be like this:

<!-- <router-outlet></router-outlet> -->
<mat-slider min="1" max="100" step="1" value="1"></mat-slider>

You should see a slider on your browser test site.

---

If all else fails, I've created a repository that's configured and working with the versions I've shown you.

What you want to do is just clone it, and run the necessary commands:

git clone https://github.com/dev-cyprium/angular-with-material.git
cd angular-with-material
npm install
ng serve

Now, navigate to the browser and you should see the slider component.