Can not add material to project using ng add @angular/material

[landonwaldner]

Bug, feature request, or proposal:

Can not add material using schematic

What is the expected behavior?

Add material to project

What is the current behavior?

PS C:\Users\lando\test-project> ng add @angular/material
Installing packages for tooling via npm.
Collection "@angular/material" cannot be resolved.
Error: Collection "@angular/material" cannot be resolved.
at NodeModulesEngineHost._resolveCollectionPath (C:\Users\lando\test-project\node_modules@angular-devkit\schematics\tools\node-module-engine-host.js:88:15)
at NodeModulesEngineHost.createCollectionDescription (C:\Users\lando\test-project\node_modules@angular-devkit\schematics\tools\file-system-engine-host-base.js:106:27)
at SchematicEngine._createCollectionDescription (C:\Users\lando\test-project\node_modules@angular-devkit\schematics\src\engine\engine.js:78:40) at SchematicEngine.createCollection (C:\Users\lando\test-project\node_modules@angular-devkit\schematics\src\engine\engine.js:71:43)
at Object.getCollection (C:\Users\lando\test-project\node_modules@angular\cli\utilities\schematics.js:28:31) at AddCommand.getOptions (C:\Users\lando\test-project\node_modules@angular\cli\models\schematic-command.js:193:41)
at AddCommand. (C:\Users\lando\test-project\node_modules@angular\cli\commands\add.js:30:49) at Generator.next ()
at C:\Users\lando\test-project\node_modules@angular\cli\commands\add.js:7:71 at new Promise ()

What are the steps to reproduce?

ng new test-project --style scss --routing
ng add @angular/material

What is the use-case or motivation for changing an existing behavior?

Having it work

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/material": "^6.3.0",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.3",
"@angular-devkit/build-angular": "~0.6.8",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.8",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}

Is there anything else we should know?

[mohjache]

Hey,
I don't know what the fix is but by specifying to install the previous version angular/material@6.2.1 and angular/cdk@6.2.1 I was able to generate schematics successfully. judging from the fact 6.3.0 was updated 8 hours ago made me try the downgrade. I've pasted my package.json below:

{
  "name": "materialpoc",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^6.2.1",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.2.1",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

[lucferbux]

As mentioned, angular material 6.3.0 seems broken, hope they will fix it soon, till now, downgrade to previous version (ex. 6.2.1 and install it from there)

[vladshut]

node_modules/@angular/material/schematics/collection.json
Error: Invalid JSON character: " " at 29:49.

[FreakyMithril]

Temp solution, use old version
ng add @angular/material@6.2.1

[mohaqqani]

Facing same issue when running ng add @angular/material

[emmano3h]

Facing the same issue. I've just used the old version @angular/material@6.2.1 as temp solution

[ErikRobles]

mithril's suggestion worked for me. Thanks

[ukon1990]

Experiencing the same thing.

[fad250]

#11844 (comment)

Check this issue and see jelbourn comment.

[SigmaOutdoors]

Me too, but uamithril's solution below also worked for me

ng add @angular/material@6.2.1

[jimidle]

But is there any work around for:

ng generate @angular/material:material-nav --name="app-nav"
Collection "@angular/material" cannot be resolved.

Once you have got 6.3.0 by using @latest ?

[rohitgaidhane]

better way just add old one
ng add @angular/material@6.2.1