尝试安装 @angular/material 时出现此错误数据路径“”不应具有其他属性（样式）

Question

正如标题所说，我无法在我的项目中安装 material，我在 google 中搜索了很多小时，但找不到答案，我发现了很多类似的问题但是 none 就像我的一样。执行此命令后 ng add @angular/material 会抛出一条消息。

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.

在 angular-errors.log 里面说

[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)

我有节点 12.x.x LTS 和 angular 9.0 尝试修复它我做了以下将节点更新到 14.16.0 LTS 和 ng 更新 @angular/core@10 @angular/cli@10 更新 angular.

我还有运行 npm 审核修复、npm 缓存清除、npm 缓存更新前后验证。

运行ning 在 macOs big sur 上。谢谢。

Answer 1

让我们一步一步地一起努力。我会在本地复习每一步，它应该也适合你。

首先确保我们运行使用相同的 node 和 npm 版本。

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

现在让我们确定我们的机器上没有安装以前版本的angular-cli：

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

因为我安装了一个版本，所以我想先删除它。

$ npm uninstall -g @angular/cli

好的，现在让我们安装新版本 @angular/cli

npm install -g @angular/cli

现在，让我们创建一个新项目：

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

让我们进一步 CD 进去，确保我们运行宁

cd my-dream-app
ng serve

您现在运行ning 应该可以看到它。

好的，现在 angular material。停止服务器，让我们添加这个依赖。

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

让我们再次运行服务器：

ng serve

让我们通过将以下内容添加到 app-module.ts

来确保我们运行ning

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

然后把我们的HTMLapp.component.html改成这样：

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

您应该会在浏览器测试站点上看到一个滑块。

如果一切都失败了，我已经创建了一个存储库，该存储库已配置并可以使用我向您展示的版本。

您只需克隆它，然后运行必要的命令：

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

现在，导航到浏览器，您应该会看到滑块组件。

Answer 2

我用 jhipster 创建的新项目做了一个小例子，并检查了在项目根目录下创建的 angular.json 文件，结果发现该文件包含这个片段

  "styles": [],

所以我删除了它并再次运行

ng add @angular/material

问题消失了。

尝试安装 @angular/material 时出现此错误数据路径“”不应具有其他属性（样式）

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

angular

npm

jhipster