Common Angular Material Setup Issues (with Solutions)

❌ Problem 1:

main.ts:22  ERROR RuntimeError: NG0201: No provider for NgControl found in NodeInjector

✅ Cause:

This error occurs when Angular tries to use ngModel, formControl, or formControlName but FormsModule or ReactiveFormsModule hasn’t been imported into the current component.

✅ Solution:

Make sure you import the necessary form modules into your standalone component or module:

imports: [
  CommonModule,
  FormsModule,             // For ngModel
  ReactiveFormsModule      // For reactive forms
]

---

❌ Problem 2:

Module not found: Error: Can't resolve '@angular/cdk/layout'

✅ Cause:

You're trying to use a component or feature (like BreakPointObserver or Material Layout utilities) from @angular/cdk/layout, but the CDK package is not installed or is outdated.

✅ Solution:

Install the CDK package:

npm install @angular/cdk --save

If it's already installed but outdated, update it:

ng update @angular/cdk

---

❌ Problem 3:

ng add @angular/material
✖ Unable to install package
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve

✅ Cause:

This usually happens when peer dependencies conflict or Angular CLI fails to resolve package versions automatically.

✅ Solution:

Instead of using ng add, manually install the dependencies using the legacy peer resolution flag:

npm install @angular/material @angular/cdk --legacy-peer-deps

⚠️ Only use --legacy-peer-deps if you’re blocked and cannot resolve dependencies cleanly. Always prefer using compatible versions.

---

❓ Bonus: How to Know What Packages ng add Would Install?

The ng add command installs the necessary packages and runs schematics provided by the library. If you want to preview what ng add will do:

✅ Method 1: Dry Run with Verbose Output

ng add @angular/material --dry-run --verbose

✅ Method 2: Manually Check package.json in the GitHub Repo

Look at the package.json and ng-add schematic files in the library’s GitHub repo. For Angular Material:

• GitHub: https://github.com/angular/components

✅ Method 3: Use npm info

npm info @angular/material

This shows dependencies, versions, and metadata.

---

✅ Summary

---