集成Angular Material时AppModule导入MatDialog报错，编译正常浏览器异常求助

Hey there, let's get this Angular Material issue sorted out quickly! That error is telling you exactly what's wrong—you've tried importing MatDialog directly into your AppModule, but MatDialog isn't an Angular module (@NgModule), it's a service that needs to be injected into your components instead.

Why This Happens #

Angular Material groups its functionality into feature modules. For dialog capabilities, you need to import the MatDialogModule (the actual @NgModule), not the MatDialog service itself. The module handles providing the MatDialog service automatically, so you can use it in your components without manual setup.

Step-by-Step Fix #

1. Update your AppModule imports
   Replace the direct MatDialog import with MatDialogModule in your AppModule (or whichever module needs dialog functionality):

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { MatDialogModule } from '@angular/material/dialog'; // This is the correct import
   // Remove this line: import { MatDialog } from '@angular/material/dialog';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [
       BrowserModule,
       MatDialogModule // Add the module to your imports array
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. Use MatDialog in your component
   Now you can inject MatDialog into any component that needs to open dialogs:

   import { Component } from '@angular/core';
   import { MatDialog } from '@angular/material/dialog';
   import { YourCustomDialogComponent } from './path-to-dialog/your-custom-dialog.component';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     constructor(private dialog: MatDialog) {}
   
     openDialog() {
       this.dialog.open(YourCustomDialogComponent);
     }
   }
   

Quick Recap #

• Modules (like MatDialogModule) belong in the imports array of your @NgModule
• Services (like MatDialog) are injected into components via the constructor—no need to add them to imports or providers (the feature module takes care of providing the service)

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