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

3
votes

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.

3
angularangular-materialangular-cli
I had the same issue. Installing material npm install --save @angular/material @angular/cdk @angular/animations and running ng add @angular/material worked for me. – Aj1
which version of angular cli you re using/ – Aniruddha Das
@AniruddhaDas 8.0.3, it's in the post too – Emil Bonne Kristiansen

3 Answers

0
votes

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.

7
votes

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
0
votes

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