Problems with Angular Material

Question

I am trying to insert a "dialog" component of Angular Material, but the console is displaying the following error that I cannot solve:

WARNING in . /src/app/app.module.ts 19:16-31 "export 'Dialogcomponent' was not found in './dialog/dialog.Component' i wdm : Compiled with warnings.

ERROR in src/app/app.module.ts(9,10): TS2305 error: Module "C:/Users/munir.junior/Desktop/iob-educacao/src/app/dialog/dialog.Component"' has on Exported Member 'Dialogcomponent'.

app.modulets.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { BannerComponent } from './banner/banner.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatDialogModule} from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    BannerComponent,
    DialogComponent,
    MatDialogModule
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

Answer 1

Import the module instead of redeclaring the material component.

import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    BannerComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatDialogModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Answer 2

Your error is occurring because the Matdialogmodule is in declarations and not in Imports, also no need to import the Dialogcomponent in your module and yes only in your component (.ts). Try to change them from place and it will probably work, I hope I have helped.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { BannerComponent } from './banner/banner.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatDialogModule} from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    BannerComponent,
    **DialogComponent**,
    **MatDialogModule**
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

Answer 3

Every component that will be used as dialog must be placed in declarations and in entryComponents within your app.module.ts, as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { BannerComponent } from './banner/banner.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';

@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        BannerComponent,
        DialogComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MatDialogModule 
    ],
    providers: [],
    bootstrap: [AppComponent],
    entryComponents: [
        DialogComponent
    ]
})
export class AppModule { }

I recommend you create a new module to place your Angular Material modules, as follows:

1. Create a new file .ts in your project (can be in the same folder as app.module.ts) and give any name, like material.module.ts.
2. Inside this file, set the basic layout:

import { NgModule } from '@angular/core';

@NgModule({
    imports: [],
    exports: []
})

export class MaterialModule { }

3. Import the modules from the Angular Material components you want to work with, such as MatDialogModule.

// Para habilitar o uso de 'dialog'
import { MatDialogModule } from '@angular/material/dialog';

4. Create a variable to store the reference to modules just below imports:

const materialModules = [MatDialogModule];

5. Add the variable created above to imports and exports in the @NgModule:

@NgModule({
    imports: [...materialModules],
    exports: [...materialModules]
})

Your material.module.ts will look like this:

import { NgModule } from '@angular/core';

// Para habilitar o uso de 'dialog'
import { MatDialogModule } from '@angular/material/dialog';

const materialModules = [MatDialogModule];

@NgModule({
    imports: [...materialModules],
    exports: [...materialModules]
})

export class MaterialModule { }

6. Now, import into your app.module.ts the file you just edited and put your reference inside imports of @NgModule:

import { MaterialModule } from './material.module';

@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MaterialModule
    ],
    declarations: [
        AppComponent,
        HeaderComponent,
        BannerComponent,
        DialogComponent
    ],
    providers: [],
    bootstrap: [AppComponent],
    entryComponents: [
        DialogComponent
    ]
})

This way, your code gets cleaner and a lot quieter to work with. Whenever you want to use a new component of Angular Material just add the module in material.module.ts in the same way as the MatDialogModule. For example, if you want to add the table module:

import { NgModule } from '@angular/core';

// Para habilitar o uso de 'dialog'
import { MatDialogModule } from '@angular/material/dialog';
// Para habilitar o uso de 'table'
import { MatTableModule } from '@angular/material/table';

const materialModules = [MatDialogModule, MatTableModule];

@NgModule({
    imports: [...materialModules],
    exports: [...materialModules]
})

export class MaterialModule { }

Hugs!