title: How do I resolve missing dependencies for @angular/material
body: <p>I have an angular project that, up till now, would build and run successfully.  I wanted to add a modal and came across some articles about <a href="https://blog.angular-university.io/angular-material-dialog/" rel="nofollow noreferrer">building a dialog with Angular Materials</a>.</p>
  <p>The problem comes when I run ng serve.  I get an error:</p>
  <pre><code>
      PS C:\Users\my_directory&gt; ng serve
      file:///C:/Users/my_directory/source/repos/Timesheet%20angular/Timesheet%20angular/ClientApp/node_modules/@angular/compiler-cli/bundles/chunk-DJRTTRF3.js:941
            throw new Error(`The target entry-point &quot;${invalidTarget.entryPoint.name}&quot; has missing dependencies:
                  ^
      Error: The target entry-point &quot;@angular/material&quot; has missing dependencies:
       - @angular/cdk/a11y
       - @angular/cdk/coercion
       - @angular/cdk/bidi
       - @angular/cdk/keycodes
       - @angular/cdk/overlay
       - @angular/cdk/portal
       - @angular/cdk/scrolling
  
  </code></pre>
  <p>I have tried to reinstall angular material and cdk (<code>npm install --save @angular/material @angular/cdk</code> ), I found <a href="https://stackoverflow.com/questions/66828608/the-target-entry-point-angular-material-slider-has-missing-dependencies">this solution on Stack Overflow</a> but running the command <code>npm i @angular/cdk -d</code> did not fix the problem.</p>
  <p>Here is my package.json</p>
  <pre><code>
      {
        &quot;name&quot;: &quot;timesheet_angular&quot;,
        &quot;version&quot;: &quot;0.0.0&quot;,
        &quot;scripts&quot;: {
          &quot;ng&quot;: &quot;ng&quot;,
          &quot;prestart&quot;: &quot;node aspnetcore-https&quot;,
          &quot;start&quot;: &quot;run-script-os&quot;,
          &quot;start:windows&quot;: &quot;ng serve --port 44440 --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key&quot;,
          &quot;start:default&quot;: &quot;ng serve --port 44440 --ssl --ssl-cert $HOME/.aspnet/https/${npm_package_name}.pem --ssl-key $HOME/.aspnet/https/${npm_package_name}.key&quot;,
          &quot;build&quot;: &quot;ng build&quot;,
          &quot;build:ssr&quot;: &quot;ng run Timesheet_angular:server:dev&quot;,
          &quot;watch&quot;: &quot;ng build --watch --configuration development&quot;,
          &quot;test&quot;: &quot;ng test&quot;
        },
        &quot;private&quot;: true,
        &quot;dependencies&quot;: {
          &quot;@angular/animations&quot;: &quot;~13.1.1&quot;,
          &quot;@angular/cdk&quot;: &quot;^14.0.4&quot;,
          &quot;@angular/common&quot;: &quot;~13.1.1&quot;,
          &quot;@angular/compiler&quot;: &quot;~13.1.1&quot;,
          &quot;@angular/core&quot;: &quot;~13.1.1&quot;,
          &quot;@angular/forms&quot;: &quot;~13.1.1&quot;,
          &quot;@angular/localize&quot;: &quot;~13.1.1&quot;,
          &quot;@angular/material&quot;: &quot;^7.3.7&quot;,
          &quot;@angular/platform-browser&quot;: &quot;~13.1.1&quot;,
          &quot;@angular/platform-browser-dynamic&quot;: &quot;~13.1.1&quot;,
          &quot;@angular/platform-server&quot;: &quot;~13.1.1&quot;,
          &quot;@angular/router&quot;: &quot;~13.1.1&quot;,
          &quot;@ng-bootstrap/ng-bootstrap&quot;: &quot;^12.1.2&quot;,
          &quot;@popperjs/core&quot;: &quot;^2.10.2&quot;,
          &quot;bootstrap&quot;: &quot;^5.1.3&quot;,
          &quot;hammerjs&quot;: &quot;^2.0.8&quot;,
          &quot;jquery&quot;: &quot;^3.6.0&quot;,
          &quot;oidc-client&quot;: &quot;^1.11.5&quot;,
          &quot;popper.js&quot;: &quot;^1.16.0&quot;,
          &quot;run-script-os&quot;: &quot;^1.1.6&quot;,
          &quot;rxjs&quot;: &quot;~6.6.0&quot;,
          &quot;tslib&quot;: &quot;^2.1.0&quot;,
          &quot;zone.js&quot;: &quot;~0.11.4&quot;
        },
        &quot;devDependencies&quot;: {
          &quot;@angular-devkit/build-angular&quot;: &quot;~13.1.2&quot;,
          &quot;@angular/cli&quot;: &quot;^14.0.3&quot;,
          &quot;@angular/compiler-cli&quot;: &quot;~13.1.1&quot;,
          &quot;@types/jasmine&quot;: &quot;~3.6.0&quot;,
          &quot;@types/jasminewd2&quot;: &quot;~2.0.8&quot;,
          &quot;@types/node&quot;: &quot;^12.11.1&quot;,
          &quot;jasmine-core&quot;: &quot;~3.8.0&quot;,
          &quot;karma&quot;: &quot;~6.3.0&quot;,
          &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
          &quot;karma-coverage&quot;: &quot;~2.0.3&quot;,
          &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
          &quot;karma-jasmine-html-reporter&quot;: &quot;^1.5.0&quot;,
          &quot;typescript&quot;: &quot;~4.4.4&quot;
        }
      }
  
  </code></pre>
  <p>Here is the HTML and TS files for the modal I'm trying to build</p>
  <pre><code>
      &lt;h2 mat-dialog-title&gt; {{ description }} &lt;/h2&gt;
      
      &lt;mat-dialog-content [formGroup]=&quot;form&quot;&gt;
      
        &lt;mat-form-field&gt;
          &lt;input matInput
                 placeholder=&quot;Course Description&quot;
                 formControlName=&quot;description&quot;&gt;
        &lt;/mat-form-field&gt;
        ....
      
      &lt;/mat-dialog-content&gt;
      
      &lt;mat-dialog-actions&gt;
        &lt;button class=&quot;mat-raised-button&quot; (click)=&quot;close()&quot;&gt; Close&lt;/button&gt;
        &lt;button class=&quot;mat-raised-button mat-primary&quot; (click)=&quot;save()&quot;&gt; Save&lt;/button&gt;
      &lt;/mat-dialog-actions&gt;
  
  </code></pre>
  <pre><code>
      import { Component, OnInit } from '@angular/core';
      import { MatDialog, MatDialogConfig } from &quot;@angular/material&quot;;
      
      @Component({
        selector: 'app-dialog',
        templateUrl: './dialog.component.html',
        styleUrls: ['./dialog.component.css']
      })
          export class DialogComponent implements OnInit {
      constructor(private dialog: MatDialog) { }
  
      ngOnInit(): void {
      }
  
      openDialog() {
  
      const dialogConfig = new MatDialogConfig();
  
      dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;
  
      this.dialog.open(DialogComponent, dialogConfig);
        }
      
      }
  
  </code></pre>