'ng add @angular/material' produces error, why?

Question

When I try to install angular material components by using the ng add command I get an package already installed error.

$ ng add @angular/material
Skipping installation: Package already installed

Cannot find module '@angular-devkit/schematics/tasks'
Error: Cannot find module '@angular-devkit/schematics/tasks'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
at Function.Module._load (internal/modules/cjs/loader.js:506:25)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (C:\Users\emilbonnek\node_modules@angular\material\schematics\ng-add\index.js:10:17)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at new ExportStringRef(C:\Users\emilbonnek\Documents\private\ultimating\node_modules@angular-devkit\schematics\tools\export-ref.js:18:25)
at NodeModulesEngineHost._resolveReferenceString (C:\Users\emilbonnek\Documents\private\ultimating\node_modules@angular-devkit\schematics\tools\node-module-engine-host.js:94:21)
at NodeModulesEngineHost.createSchematicDescription(C:\Users\emilbonnek\Documents\private\ultimating\node_modules@angular-devkit\schematics\tools\file-system-engine-host-base.js:179:34)
at SchematicEngine.createSchematic (C:\Users\emilbonnek\Documents\private\ultimating\node_modules@angular-devkit\schematics\src\engine\engine.js:219:38)

I don't have access to any of the modules, so I don't think its because the package is already installed, however it could be that I have simply misunderstood something about schematics.

I am on angular CLI version 8.0.3 and same for devkit/core and devkit/schematics. I am completely sure I am running the command in the right directory.

Why is the command not doing as it is supposed to? any help is appreciated.

Answer 1

Be sure to have installed globally: @angular-devkit/schematics-cli

npm install -g @angular-devkit/schematics-cli

This way, it would work before npm install

Answer 2

I ran into this issue as well with the latest version of Material UI and Angular CLI. I was only able to run the add command after installing material manually as @Aj1 mentioned above:

npm install --save @angular/material @angular/cdk @angular/animations
ng add @angular/material

Answer 3

I guess there's something wrong with your node_modules, as it doesn't find @angular-devkit/schematics/tasks. I'd clean it and reinstall again to avoid any unexpected problems, and try again.

Adopting the schematics paradigm means that we do not edit the package.json directly anymore, and use ng add and ng update only, but as Aj1 said, sometimes it works installing the package and running the schematic after that.