angular开发问题：Module not found: Error: Can't resolve '@angular/material/typings/esm5/dialog'

浅浅的花香味﹌ 2021-09-28 04:18 482阅读 0赞

# angular开发问题：Module not found: Error: Can’t resolve ‘@angular/material/typings/esm5/dialog’ #

## Error回顾 ##

在进行angular项目开发是使用material框架进行ui开发，其中某个功能使用到dialog组件。  
在开发组件时候出现异常，报错如下:  
  
Module not found: Error: Can’t resolve ‘@angular/material/typings/esm5/dialog’ in ‘E:\\git\\man\\manpower-statistic\\ManpowerFront\\src\\app\\component\\manpower\\manpower-target-project\\manpower-target-project-dialog’

该问题纠结了大半小时，没注意问题出在哪里。。。  
后面重新备份文件，重新开发页面回顾问题重现过程。

# Solution解决 #

发现问题出在imports上，material dialog应该导入@angular/material/dialog  
实际导入了@angular/material/typings/esm5/dialog 。 汗！！！！，开发时候偶尔犯的错。

import { MAT_DIALOG_DATA, } from '@angular/material';
    import { MatDialogRef} from '@angular/material/typings/esm5/dialog';

改为如下即可：

import { MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';

## Dialog部分功能代码如下 ##

ts文件：

import { Component, Inject, OnInit} from '@angular/core';
    import { FormBuilder, FormGroup} from '@angular/forms';
    import { MAT_DIALOG_DATA, } from '@angular/material';
    import { MatDialogRef} from '@angular/material/typings/esm5/dialog';
    
    @Component({ 
      selector: 'app-manpower-relproject-dialog',
      templateUrl: './manpower-relproject-dialog.component.html',
      styleUrls: ['./manpower-relproject-dialog.component.css']
    })
    export class ManpowerRelprojectDialogComponent implements OnInit { 
    
      dialogData: FormGroup;
    
      constructor(public dialogRef: MatDialogRef<ManpowerRelprojectDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any, private fb: FormBuilder) { }
    
      ngOnInit() { 
        this.dialogData = this.fb.group({ 
          id: ['0'],
          name: [''],
          type: [''],
          display: [''],
          labPro: [''],
        });
        console.log('inject data: ' + this.data);
        this.dialogData.setValue(this.data);
      }
    
    }

html文件：

<h2 class="dialog-title" mat-dialog-title>
      <span>用户信息</span>
      <span style="float: right;margin-right: 20px;background-color: #ddd;border-radius: 3px;">
      </span>
    </h2>
    <mat-dialog-content class="mat-typography dialog-content" >
      <form [formGroup]="dialogData" style="width:100%;font-size: 16px;">
        <span style="display: none;">{
       {dialogData.value|json}}</span><br/>
        <mat-form-field style="display: none;">
          <mat-label>ID</mat-label>
          <input matInput hidden formControlName="id">
        </mat-form-field >
        <mat-form-field class="col-lg-10" style="margin-left: 20px;">
          <mat-label>名称</mat-label>
          <input matInput placeholder="名称" formControlName="name">
        </mat-form-field >
        <mat-form-field class="col-lg-10" style="margin-left: 20px;">
          <mat-label>人力项目</mat-label>
          <input matInput placeholder="人力项目" formControlName="labPro">
        </mat-form-field >
        <mat-form-field class="col-lg-10" style="margin-left: 20px;">
          <mat-label>是否显示</mat-label>
          <mat-checkbox value="1" formControlName="display"></mat-checkbox>
        </mat-form-field >
      </form>
    </mat-dialog-content>
    <mat-dialog-actions class="dialog-bottom" align="end" >
      <button mat-button class="btn-sm btn-warning" mat-dialog-close>关闭</button>
      <button mat-button [mat-dialog-close]="dialogData.value" cdkFocusInitial class="btn-sm btn-primary">保存</button>
    </mat-dialog-actions>