Le composant ne s'ouvre pas en angulaire

Il existe deux façons d'ouvrir mon composant, d'une barre de navigation et d'une autre consiste à ouvrir le même composant dans la boîte de dialogue. Il n'y a qu'un formulaire de soumission à l'intérieur du composant.

Je veux que la boîte de dialogue soit automatiquement fermée lorsque l'utilisateur soumet le formulaire. Tout le bon jusqu'à là ici. Les problèmes réels se produisent maintenant, si l'instruction utilise après la fermeture de la boîte de dialogue TS code> fichier p> xxx pré>

déclaration de fermeture après la soumission de formulaire this.dialogref.close (); code> p>

La boîte de dialogue est fermée avec succès, mais le même composant cesse de fonctionner à partir de la liaison de navigation, fonctionne sans aucun problème si je l'ouvre à l'aide de la boîte de dialogue, mais ne s'ouvre jamais, je clique sur le lien de navigation et l'erreur suivante se produit. p> xxx pré>

et voici comment j'invoque ma boîte de dialogue p> xxx pré >

J'ai déjà essayé d'inclure les bibliothèques de matériaux dans app.module.ts code> et composant code> fichier. et essayé aussi Fournisseurs: [{Fournissez: Mat_dialog_Data, Usevalue: {}}] code> dans le fichier de module du composant p>

si je supprime le Public Dialogref: MatdialogRef code> Déclaration. Le composant ouvre l'amende des deux manières, mais la boîte de dialogue ne se fera pas fermée. p>

sur demande, voici mon app.module.ts code> fichier: p>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
// import { MatButtonModule } from '@angular/material/button';
import { MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';
import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { MatSelectModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import 'hammerjs';

import { FuseModule } from '@fuse/fuse.module';
import { FuseSharedModule } from '@fuse/shared.module';
import { FuseProgressBarModule, FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';

import { fuseConfig } from 'app/fuse-config';

import { AppComponent } from 'app/app.component';
import { LayoutModule } from 'app/layout/layout.module';
import { SampleModule } from 'app/main/sample/sample.module';
import { AddSalesPersonComponent } from './layout/components/Sales/add-sales-person/add-sales-person.component';
import { LoginComponent } from './layout/components/login/login.component';
import { MasterLayoutComponent } from './master-layout/master-layout.component';
import { NewLoanComponent } from './layout/components/loan/new-loan/new-loan.component';
import { ListSalesComponent } from './layout/components/Sales/list-sales/list-sales.component';
import { NewCustomerComponent } from './layout/components/customer/new-customer/new-customer.component';
import { CustomerListComponent } from './layout/components/customer/customer-list/customer-list.component';
import { NewOrganizationComponent } from './layout/components/organization/new-organization/new-organization.component';
import { ListOrganizationComponent } from './layout/components/organization/list-organization/list-organization.component';
import { NewProductComponent } from './layout/components/products/new-product/new-product.component';
import { ProductListComponent } from './layout/components/products/product-list/product-list.component';
import { NewAdminComponent } from './layout/components/admin/new-admin/new-admin.component';
import { ListAdminComponent } from './layout/components/admin/list-admin/list-admin.component';
import { LoanListComponent } from './layout/components/loan/loan-list/loan-list.component';
import { ReceivePaymentComponent } from './layout/components/payments/receive-payment/receive-payment.component';
import { MakePaymentComponent } from './layout/components/payments/make-payment/make-payment.component';

const appRoutes: Routes = [
    {
        path: '',
        component: MasterLayoutComponent,
        children: [
            {
                path: '',
                redirectTo: '/login',
                pathMatch: 'full'
            },
            {
                path: 'saveSalesPerson',
                component: AddSalesPersonComponent
            },
            {
                path: 'searchsalesperson',
                component: ListSalesComponent
            },
            {
                path: 'newcustomer',
                component: NewCustomerComponent
            },
            {
                path: 'searchcustomer',
                component: CustomerListComponent
            },
            {
                path: 'neworganization',
                component: NewOrganizationComponent
            },
            {
                path: 'searchorganization',
                component: ListOrganizationComponent
            },
            {
                path: 'newproduct',
                component: NewProductComponent
            },
            {
                path: 'searchpoduct',
                component: ProductListComponent
            },
            {
                path: 'newloan',
                component: NewLoanComponent
            },
            {
                path: 'searchLoan',
                component: LoanListComponent
            },
            {
                path: 'newadmin',
                component: NewAdminComponent
            },
            {
                path: 'searchadmin',
                component: ListAdminComponent
            },
            {
                path: 'receivePayments',
                component: ReceivePaymentComponent
            },
            {
                path: 'makePayments',
                component: MakePaymentComponent
            },
        ]
    },
    {
        path: 'login',
        component: LoginComponent,
    },

    {
        path: '**',
        redirectTo: 'salesperson'
    }
];

@NgModule({
    imports: [
        BrowserModule,
        FlexLayoutModule,
        MatButtonModule,
        MatFormFieldModule,
        FormsModule,
        MatInputModule,
        MatRippleModule,
        MatSelectModule,
        BrowserAnimationsModule,
        HttpClientModule,
        MatDialogModule,
        RouterModule.forRoot(appRoutes),

        TranslateModule.forRoot(),

        // Material moment date module
        MatMomentDateModule,

        // Material
        MatButtonModule,
        MatIconModule,

        // Fuse modules
        FuseModule.forRoot(fuseConfig),
        FuseProgressBarModule,
        FuseSharedModule,
        FuseSidebarModule,
        FuseThemeOptionsModule,

        // App modules
        LayoutModule,
        SampleModule
    ],
    declarations: [
        AppComponent,
        MasterLayoutComponent
    ],
    exports: [
        MatButtonModule,
        MatFormFieldModule,
        MatInputModule,
        MatRippleModule,

    ],
    bootstrap: [
        AppComponent
    ],
    providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }]
    
})
export class AppModule {
}