angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.76k stars 11.98k forks source link

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

Closed mbaljeetsingh closed 4 years ago

mbaljeetsingh commented 6 years ago

Versions

image

Repro steps

Observed behavior

conemu64_2018-05-04_11-14-37

Desired behavior

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

hansl commented 6 years ago

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 commented 6 years ago

I have similar issue

screen shot 2018-05-04 at 21 03 35 screen shot 2018-05-04 at 21 05 06

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

screen shot 2018-05-04 at 21 11 21

On this config it works fine :

screen shot 2018-05-04 at 21 07 56
danzrou commented 6 years ago

Same here with ng add @angular/material

eyev commented 6 years ago

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

yarn add @angular-devkit/schematics --dev

mbaljeetsingh commented 6 years ago

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 commented 6 years ago

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

leandropiga commented 6 years ago

@mbaljeetsingh the solution worked for me. Thanks!!

Shraddha80011 commented 6 years ago

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

Shraddha80011 commented 6 years ago

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

kernelgis commented 6 years ago

The solution is to indicate the version, it works for me like this: ng add @angular/material@6.3.0

CSDisciple commented 6 years ago

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 commented 6 years ago

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".
capture

smilemuffie commented 6 years ago

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: image I found the lines it remind me, and corrected ‘targets’ to 'architect', run ng add ng-zorro-antd again, success!! image

Hassanramadan03 commented 5 years ago

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

JigmeLodey commented 4 years ago

./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 commented 4 years ago

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 commented 4 years ago

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

angular-automatic-lock-bot[bot] commented 4 years ago

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.