AngularCLI 和 Angular Material（原理图）错误：无法解析集合“@angular/material”

Posted 2023-03-07

【中文标题】AngularCLI 和 Angular Material（原理图）错误：无法解析集合“@angular/material”

【英文标题】：AngularCLI and Angular Material (schematics) error: Collection "@angular/material" cannot be resolved

【发布时间】：2018-12-02 21:02:48

【问题描述】：

我正在尝试使用 this page. 上显示的 Angular 架构 当我尝试在项目根目录的终端中使用以下命令时 ng generate @angular/material:material-nav --name name-of-new-nav，我收到以下错误红色，

无法解析集合“@angular/material”。错误：集合 “@angular/material”无法解析。 在 NodeModulesEngineHost._resolveCollectionPath (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:88:15) 在 NodeModulesEngineHost.createCollectionDescription (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js:106:27) 在 SchematicEngine._createCollectionDescription (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/src/engine/engine.js:78:40) 在 SchematicEngine.createCollection (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/src/engine/engine.js:71:43) 在 Object.getCollection (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/utilities/schematics.js:28:31) 在 GenerateCommand.getOptions (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/models/schematic-command.js:193:41) 在生成命令。 （/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/commands/generate.js:38:53） 在 Generator.next () 在 /Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/commands/generate.js:7:71 在新的 Promise ()

如何让它工作？

信息：Angular CLI：6.0.8

【问题讨论】：

这里有同样的问题。如果你用谷歌搜索，它已经坏了大约 5 天了。

这是因为6.3.0 的原理图文件已损坏，并且缺少引号。这是解决此问题的 PR：github.com/angular/material2/pull/11839

同样的问题。使用接受的解决方案对我有用。

【参考方案1】：

好像坏了， 临时解决方案，使用以下版本

ng add @angular/material@6.2.1

【讨论】：

谢谢你，你也拯救了我的一天 :) 你知道是否有人为此打开了错误吗？

【参考方案2】：

尝试以下命令，它对我有用：

npm install --save @angular/material@6.2.1 @angular/cdk@6.2.1

ng add @angular/material@6.2.1

【参考方案3】：

您可以使用以下方式安装它：ng generate @angular/material:dashboard --name myDashboard

对于其他组件，它将是：ng generate @angular/material:nav --name myNavng generate @angular/material:table --name myTable

您可以在文件中找到有关其他组件原理图的信息，位于：/node_modules/@angular/material/schematics/collection.json

【参考方案4】：

以这种方式为我工作 (from docs)

ng add @angular/material

ng generate @angular/material:material-nav --name <component-name>

ng generate @angular/material:material-dashboard --name <component-name>

ng generate @angular/material:material-table --name <component-name>

Angular 6.4.7

【参考方案5】：

错误是由于 Angular Material 7 造成的。只需在终端中运行以下命令 ng 添加@angular/material@6.2.1

【参考方案6】：

我发现你的语法错误：ng generate @angular/material:nav <name-of-new-nav>.