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>