I'm trying to apply lazy loading in my application, however after I removed the module import in the app.module and left only in loadChildren, my application does not recognize one of my component declarations.
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 DialogConfirmationExclusion is not part of any NgModule or the module has not been imported into your module