Components: 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/[email protected] and angular/[email protected] 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.

[uamithril]

Temp solution, use old version
ng add @angular/[email protected]

[mohaqqani]

Facing same issue when running ng add @angular/material

[emmano3h]

Facing the same issue. I've just used the old version @angular/[email protected] as temp solution

[ErikRobles]

mithril's suggestion worked for me. Thanks

[ukon1990]

Experiencing the same thing.

[fad250]

https://github.com/angular/material2/issues/11844#issuecomment-398796341

Check this issue and see jelbourn comment.

[SigmaOutdoors]

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

ng add @angular/[email protected]

[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/[email protected]

[herbalizer404]

same problem, I also tried "ng add @angular/[email protected]" but cdk doesnt install properly 6.3.0 or 6.2.1 anyway.

[roger-walker]

I had to run the following to get it to work:

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

[TharinduRangana]

Downgrade the cli version to 6.0.0 and try ng add @angular/[email protected]

[iamtracy]

The issue might be that you aren't specifying a project name. I was able to run ng add @angular/material --project=<myProjectName> without error.

[EdricChan03]

@TharinduRangana @iamtracy It's actually because the schematics file has a missing quotation mark. #11839 fixes this.

[swamytalam]

Facing the same issue. I've just used the old version @angular/[email protected] and @angular/[email protected] as temp solution

[bluppfisk]

editing ./node_modules/@angular/schematics/collection.json to remove the redundant aliases (and thus also fixing the missing quote) works.

[BirdInTheCity]

As @bluppfisk mentioned, editing the collection.json FIXES the issue on the _latest_ version of Material. For convenience, here's the updated file:

Replace ./node_modules/@angular/material/schematics/collection.json with:

// This is the root config file where the schematics are defined.
{
  "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    // Adds Angular Material to an application without changing any templates
    "ng-add": {
      "description": "Adds Angular Material to the application without affecting any templates",
      "factory": "./install",
      "schema": "./install/schema.json",
      "aliases": ["material-shell"]
    },
    // Create a dashboard component
    "dashboard": {
      "description": "Create a card-based dashboard component",
      "factory": "./dashboard/index",
      "schema": "./dashboard/schema.json",
      "aliases": ["material-dashboard"]
    },
    // Creates a table component
    "table": {
      "description": "Create a component that displays data with a data-table",
      "factory": "./table/index",
      "schema": "./table/schema.json",
      "aliases": ["material-table"]
    },
    // Creates toolbar and navigation components
    "nav": {
      "description": "Create a component with a responsive sidenav for navigation",
      "factory": "./nav/index",
      "schema": "./nav/schema.json",
      "aliases": [ "material-nav" ]
    },
    // Creates a address form component
    "addressForm": {
      "description": "Create a component with a address form",
      "factory": "./address-form/index",
      "schema": "./address-form/schema.json",
      "aliases": ["address-form"]
    }
  }
}

[llodiaking]

i solve my problem by
ng add @angular/[email protected]

[amcdnl]

@brocco @filipesilva - Looks like this is being caused because I changed a name of a schematic and moved the old name to an alias.

So for example:

"materialDashboard": {
      "description": "Create a card-based dashboard component",
      "factory": "./dashboard/index",
      "schema": "./dashboard/schema.json",
      "aliases": ["material-dashboard"]
    },

changed to:

"dashboard": {
      "description": "Create a card-based dashboard component",
      "factory": "./dashboard/index",
      "schema": "./dashboard/schema.json",
      "aliases": ["material-dashboard", "materialDashboard"]
    },

Any ideas what would cause this?

[Splaktar]

As mentioned above, this appears to be fixed in 6.4.0+ via https://github.com/angular/material2/commit/0569b64e4ad44754db8e8d8a33682eacb65181a8.

[josephperrott]

Closing as this is fixed in the recent releases.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}