AngularCLI and Angular Material (schematics) error: Collection “@angular/material” cannot be resolved

18
votes

I am trying to use the Angular schemats that are shown on this page. When I try to use this following command in the terminal at the root of the project ng generate @angular/material:material-nav --name name-of-new-nav, I get the following error in red,

Collection "@angular/material" cannot be resolved. Error: Collection "@angular/material" cannot be resolved. at NodeModulesEngineHost._resolveCollectionPath (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:88:15) at NodeModulesEngineHost.createCollectionDescription (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js:106:27) at SchematicEngine._createCollectionDescription (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/src/engine/engine.js:78:40) at SchematicEngine.createCollection (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/src/engine/engine.js:71:43) at Object.getCollection (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/utilities/schematics.js:28:31) at GenerateCommand.getOptions (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/models/schematic-command.js:193:41) at GenerateCommand. (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/commands/generate.js:38:53) at Generator.next () at /Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/commands/generate.js:7:71 at new Promise ()

How do I get this to work?

Info: Angular CLI: 6.0.8

6
angularangular-materialangular-cli-v6
Same problem here. If you google around, it's been broken for about 5 days now. - Daniel Lyons
That's because 6.3.0 has a broken schematic file with a missing quotation mark. Here's a PR which fixes this: github.com/angular/material2/pull/11839 - Edric
Same problem. Use the accepted solution works for me. - FullStackDeveloper

6 Answers

40
votes

It seems broken, Temp solution, use the following version 

ng add @angular/[email protected]
8
votes

You can install it using:
ng generate @angular/material:dashboard --name myDashboard

For other components it will be:
ng generate @angular/material:nav --name myNav
ng generate @angular/material:table --name myTable

Info about other component schematics you can find in file, located in:
/node_modules/@angular/material/schematics/collection.json

3
votes

Try the following cmds, It worked for me : 

npm install --save @angular/[email protected] @angular/[email protected]

ng add @angular/[email protected]
1
votes

Worked for me this way (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

0
votes

The Error is due to Angular Material 7. just run the following command in your terminal ng add @angular/[email protected]

0
votes

I found you're syntax wrong : ng generate @angular/material:nav <name-of-new-nav>.