No component declaration after applying Lazy loading

Question

I am trying to apply Lazy loading on my application, but after I removed the module import in the app.module and left only on loadChildren, my application does not recognize one of my component statements.

My Routing Module app:

//Importação de módulos do angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
//Importação de módulos de rotas

const appRoutes: Routes = [
  {path: 'dash', loadChildren: 'src/app/components/dashboard/dashboard.module#DashboardModule'}
];

@NgModule({
  imports:[RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule{}

My Dashboard Routing Module:

//Importação de módulos angular
retirado para melhorar visibilidade 

const dashboardRoutes: Routes = [
    {path: '', component: DashboardComponent, canActivate: [AuthGuard],
    children: [
    { path: '', component: BemvindoComponent, pathMatch: 'full' },
    { path: 'home', component: BemvindoComponent, pathMatch: 'full' },
    { path: 'custofixo', component: CustofixoComponent, pathMatch: 'full' },
    { path: 'custoextra', component: CustoextraComponent, pathMatch: 'full'},
    { path: 'custovariavel', component: CustovariavelComponent, pathMatch: 'full'},
    { path: 'listagemcustofixo', component: ListagemCustoFixo, pathMatch: 'full'},
    { path: 'operador', component: OperadorComponent, pathMatch: 'full', canActivate: [CadOperadorGuard]},
    { path: 'produtos', component: ProdutoComponent, pathMatch: 'full'},
    { path: 'tipoprodutos', component: TipoprodutoComponent, pathMatch: 'full'},
    { path: 'meuperfil', component: MeuperfilComponent, pathMatch: 'full'},
    { path: 'confestoque', component: ConfEstoqueComponent, pathMatch: 'full'},
    { path: 'confprecificacao', component: ConfPrecificacao, pathMatch: 'full'},
    { path: 'monitoramento', component: MonitoramentoComponent, pathMatch: 'full'},
    { path: 'listagemcustovariavel', component: ListagemCustoVariavel, pathMatch: 'full'},
    { path: 'listagemcustoextra', component: ListagemCustoExtra, pathMatch: 'full'},
    { path: 'produtoscalculados', component: ProdutosCalculadosComponent, pathMatch: 'full'},
  ]}
];

@NgModule({
    imports: [RouterModule.forChild(dashboardRoutes)],
    exports: [RouterModule]
})

export class DashboardAppRouting {}

My deshboard module:

//Importação de módulos angular
import { MyMaterialDesignModule } from '../../../app.materialdesign.module';
import { MatMenuModule } from '@angular/material/menu';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
//Importação de componentes do módulo
import { DashboardAppRouting } from './dashboard.routing.module';
import { DashboardComponent } from './dashboard.component';
import { AuthGuard } from '../../guards/auth.guard';
import { LoginGuard } from '../../guards/login.guard';
import { ToastrService } from 'ngx-toastr';
import { DialogConfirmacaoExclusao } from '../dialogexclusao/dialog-exclusao.component';
import { ClickOutsideModule } from 'ng4-click-outside';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    MyMaterialDesignModule,
    HttpClientModule,
    DashboardAppRouting,
    MatMenuModule,
    ClickOutsideModule
  ],
  exports:[
    DashboardComponent
  ],
  declarations: [DashboardComponent,DialogConfirmacaoExclusao],
  providers:[
    AuthGuard,
    LoginGuard,
    ToastrService
  ]
})

export class DashboardModule { }

I get:

Uncaught Error: Component Dialogconfirmacaoexclusao is not part of any Ngmodule or the module has not been Imported into your module

Answer 1

Is there any other component or module external to the Dashboard that is using the DialogConfirmacaoExclusao? If so, I believe you put it on exports will solve the problem.

exports:[
  DashboardComponent, DialogConfirmacaoExclusao
],