Angular-cli: ng add @angular/material throws error while adding angular material to the Angular 6 cli project

[mbaljeetsingh]

Versions

Repro steps

• ng new my-app
• ng add @angular/material

Observed behavior

Desired behavior

It should successfully add angular material to the angular cli project.

[hansl]

Hi @mbaljeetsingh,

Are you using an NPM cache or private registry? This should happen if you're installing version 5 of Material. Version 6 is latest right now so this should work.

[dtomaszewski]

I have similar issue

When I try to add schematics one more time it becomes even weirder :D

On this config it works fine :

[danzrou]

Same here with ng add @angular/material

[eyev]

@dtomaszewski I also had this error, simply adding the package manually resolved the problem

yarn add @angular-devkit/schematics --dev

[mbaljeetsingh]

One solution I found is, If you install @angular/material and @angular/cdk dependencies locally before running ng add command, then it seems to work.

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

Note: ng add @angular/material command working fine on my other machine with the same node, npm and angular cli version.

[dtomaszewski]

@eyev this solution does not work for me, however @mbaljeetsingh solution with manual install before ng add works as a workaround

[leandropiga]

@mbaljeetsingh the solution worked for me. Thanks!!

[Shraddha80011]

I am facing same problem with ng add @angular/material.
Error: Collection "@angular/material" cannot be resolved.

[Shraddha80011]

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

[kernelgis]

The solution is to indicate the version, it works for me like this: ng add @angular/[email protected]

[CSDisciple]

So I had a similar issue regarding material not working and getting the "typerror some function not defined".
Fix

1. Run ng update in project console ( shows what can be updated )
2. ng update _filename to update_
3. npm install (this step is actually what I was missing after updating @angular/core)
4. ng serve (rerun your project and that should work (that's how I fixed my issue))

_Please let me know if I need a more thorough explanation!_

[pom1004]

I followed this process to update my project first.
https://www.techiediaries.com/updating-angular-cli-projects/ because "ng add" is a feature of angular 6 but in my project, as it is running angular 5 so the main file 'angular.json' file was missing. And that is why "ng add was not working in my project".

[smilemuffie]

When I was installing ng-zorro-antd, I had the same issue. What I did was, deleted the node_module and install it again. After that, I run ng add ng-zorro-antd, and got an warning:

I found the lines it remind me, and corrected ‘targets’ to 'architect', run ng add ng-zorro-antd again, success!!

[Hassanramadan03]

what's the best version of angularMaterial compatible with angular 6 ?

[JigmeLodey]

./node_modules/@angular/material/__ivy_ngcc__/fesm2015/form-field.js
Module build failed: Error: ENOENT: no such file or directory, open '/root/Documents/lodey/project/node_modules/@angular/material/__ivy_ngcc__/fesm2015/form-field.js'
at Object.openSync (fs.js:443:3)
at Object.readFileSync (fs.js:343:35)
at Storage.provideSync (/root/Documents/lodey/project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:109:13)
at CachedInputFileSystem.readFileSync (/root/Documents/lodey/project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:289:32)
at Observable.rxjs_1.Observable.obs [as _subscribe] (/root/Documents/lodey/project/node_modules/@ngtools/webpack/src/webpack-input-host.js:35:51)
at Observable._trySubscribe (/root/Documents/lodey/project/node_modules/@ngtools/webpack/node_modules/rxjs/internal/Observable.js:44:25)
at Observable.subscribe (/root/Documents/lodey/project/node_modules/@ngtools/webpack/node_modules/rxjs/internal/Observable.js:30:22)
at SyncDelegateHost._doSyncCall (/root/Documents/lodey/project/node_modules/@angular-devkit/core/src/virtual-fs/host/sync.js:22:20)
at SyncDelegateHost.read (/root/Documents/lodey/project/node_modules/@angular-devkit/core/src/virtual-fs/host/sync.js:49:21)
at WebpackCompilerHost.readFileBuffer (/root/Documents/lodey/project/node_modules/@ngtools/webpack/src/compiler_host.js:165:44)
at VirtualFileSystemDecorator.readFile (/root/Documents/lodey/project/node_modules/@ngtools/webpack/src/virtual_file_system_decorator.js:42:54)
at processResource (/root/Documents/lodey/project/node_modules/loader-runner/lib/LoaderRunner.js:202:11)
at iteratePitchingLoaders (/root/Documents/lodey/project/node_modules/loader-runner/lib/LoaderRunner.js:158:10)
at runLoaders (/root/Documents/lodey/project/node_modules/loader-runner/lib/LoaderRunner.js:365:2)
at NormalModule.doBuild (/root/Documents/lodey/project/node_modules/webpack/lib/NormalModule.js:295:3)
at NormalModule.build (/root/Documents/lodey/project/node_modules/webpack/lib/NormalModule.js:446:15)

[SchnWalter]

I just tested ng add @angular/material using the latest Angular CLI in a brand new project and it worked just fine.

$ npx ng version // click for details

Angular CLI: 9.1.7
Node: 12.16.1
OS: linux x64

Angular: 9.1.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.7
@angular-devkit/build-angular     0.901.7
@angular-devkit/build-optimizer   0.901.7
@angular-devkit/build-webpack     0.901.7
@angular-devkit/core              9.1.7
@angular-devkit/schematics        9.1.7
@angular/cdk                      9.2.4
@angular/cli                      9.1.7
@angular/material                 9.2.4
@ngtools/webpack                  9.1.7
@schematics/angular               9.1.7
@schematics/update                0.901.7
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

The initial report is almost 2 years old and the last comment is unrelated. I think that this can be closed.

@JigmeLodey, you should never use the Angular CLI (or npm for that matter) while logged in as the root user. If you still encounter the error, you should create a new issue, but make sure that you read the Submission Guidelines.

[mbaljeetsingh]

This actually works with the latest version of Angular. So closing it.

[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._}