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

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>IDmat-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>

你可能感兴趣的:(angular)