Angular12引入MatDialog出现Can't resolve all parameters for MatDialog错误如何解决

报错原因 #

这个报错是MatDialog的依赖注入失败，根源是你的模块配置错误，加上Storybook运行环境缺了必要依赖配置。

解决步骤 #

1. 修正CustomDialogModule配置
   你错误地把模块、服务放到了不对应的数组位置，正确配置如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CustomDialogComponent } from './custom-dialog/custom-dialog.component';
import { CustomDialogWindow } from './custom-dialog/custom-dialog.component';
import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  declarations: [
    CustomDialogComponent,
    CustomDialogWindow,
  ],
  imports: [
    CommonModule,
    BrowserAnimationsModule, // Dialog依赖动画模块，必须引入
    MatDialogModule // 模块放到imports数组，自带所有Dialog相关服务的注入配置
  ],
  exports: [
    CustomDialogComponent
  ],
  // 弹窗是动态渲染组件，Angular12 Ivy环境下可选，非Ivy必须加
  entryComponents: [CustomDialogWindow]
})
export class CustomDialogModule { }

注意：不要手动把MatDialog、MatDialogRef、MatDialogModule放到providers、exports数组里，这几个都不属于这两个数组的配置范围。

2. 补充Storybook配置
   如果你是在Storybook中单独渲染这个组件，需要在对应stories文件的moduleMetadata中引入必要模块：

import { moduleMetadata, Story, Meta } from '@storybook/angular';
import { CustomDialogComponent } from './custom-dialog.component';
import { MatDialogModule } from '@angular/material/dialog';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

export default {
  title: 'CustomDialog',
  component: CustomDialogComponent,
  decorators: [
    moduleMetadata({
      imports: [MatDialogModule, BrowserAnimationsModule],
      declarations: [CustomDialogComponent, CustomDialogWindow]
    })
  ]
} as Meta;

const Template: Story<CustomDialogComponent> = (args: CustomDialogComponent) => ({
  props: args
});

export const Default = Template.bind({});

3. 版本校验
   确认你安装的@angular/material、@angular/cdk版本和Angular 12.0.3完全匹配，大版本号必须一致，版本不兼容也会导致依赖注入失败。

内容的提问来源于stack exchange，提问作者scarron1000