Saturday, 27 October 2018

Lazy loading don't find the declaration of my component

I'm trying to apply lazy loading in my app routing module, but when i exclude the "Dashboard Module" from app.module.ts, my component "DialogConfirmacaoExclusao" is alerted that is not part of any ngModule.

I try:

My app routing module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

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

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

In my app.module i import my appRoutingModule e exclude the DashboardModule from the list of imports:

import { AppRoutingModule } from './app.routing.module';

My dashboard routing module:

const dashboardRoutes: Routes = [
    {path: 'dash', 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: CustoMensalFixo, 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: CustoMensalVariavel, pathMatch: 'full'},
    { path: 'listagemcustoextra', component: CustoExtraMensal, pathMatch: 'full'},
    { path: 'produtoscalculados', component: ProdutosCalculadosComponent, pathMatch: 'full'},
  ]}
];

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

export class DashboardAppRouting {}

My dashboard module declare and export the component "DialogConfirmacaoExclusao":

import { DialogConfirmacaoExclusao } from '../dialogexclusao/dialog-exclusao.component';
  exports:[
    DialogConfirmacaoExclusao
]

...

  declarations: [DialogConfirmacaoExclusao]

But i receive:

Uncaught Error: Component DialogConfirmacaoExclusao is not part of any NgModule or the module has not been imported into your module.

@Edit:

My app.module.ts:

//Importação de módulos angular
import { FormsModule } from '@angular/forms';
import { MyMaterialDesignModule } from '../app.materialdesign.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { NgxMaskModule } from 'ngx-mask';
//Importação de módulos do sistema
import { LoadingModule } from './components/loading/loading.module';
import { DialogEdicaoMovimentacaoModule } from './components/dashboard/dialogedicaomovimentacao/dialog-edicao.module';
import { AppRoutingModule } from './app.routing.module';
import { DashboardModule } from './components/dashboard/dashboard.module';
import { LoginComponent } from './components/login/login.component';
import { CustoextraModule } from './components/dashboard/custoextra/custoextra.module';
import { CustovariavelModule } from './components/dashboard/custovariavel/custovariavel.module';
import { OperadorModule } from './components/dashboard/operador/operador.module';
import { TipoProdutoModule } from './components/dashboard/tipoproduto/tipoproduto.module';
import { ProdutoModule } from './components/dashboard/produto/produto.module';
import { LoginModule } from './components/login/login.module';
import { BemVindoModule } from './components/dashboard/bemvindo/bemvindo.module';
import { CustoFixoModule } from './components/dashboard/custofixo/custofixo.module';
import { MeuPerfilModule } from './components/dashboard/meuperfil/meuperfil.module';
import { DialogsModule } from './components/dashboard/dialogedicaolistagemcustos/dialog-edicao.module';
import { ConfEstoqueModule } from './components/dashboard/confestoque/confestoque.module';
import { ConfPrecificacaoModule } from './components/dashboard/confprecificacao/confprecificacao.module';
import { MonitoramentoModule } from './components/dashboard/monitoramento/monitoramento.module';
import { CustoExtraModule } from './components/dashboard/customensalextra/customensalextra.module';
import { SearchPipeModule } from './pipes/searchpipe/searchpipe.module';
import { ProdutosCalculadosModule } from './components/dashboard/produtoscalculados/produtoscalculados.module';
import { DialogEsqueceuSenhaModule } from './components/login/dialogesqueceusenha/dialog-esqueceu-senha.module';
import { CallBackRecuperacaoSenhaModule } from './components/login/callbackrecuperacaosenha/callbackrecuperacaosenha.module';
import { CustoMensalFixoModule } from './components/dashboard/customensalfixo/customensalfixocomponent';
import { CustoMensalVariavelModule } from './components/dashboard/customensalvariavel/customensalvariavel.module';


@NgModule({
  declarations: [
  ],
  imports: [
    BrowserModule,
    CallBackRecuperacaoSenhaModule,
    CustoMensalFixoModule,
    DialogEdicaoMovimentacaoModule,
    DialogEsqueceuSenhaModule,
    DialogsModule,
    ProdutosCalculadosModule,
    CustoExtraModule,
    SearchPipeModule,
    ConfPrecificacaoModule,
    CustoFixoModule,
    MonitoramentoModule,
    LoadingModule,
    CustoFixoModule,
    TipoProdutoModule,
    ProdutoModule,
    MeuPerfilModule,
    OperadorModule,
    CustovariavelModule,
    CustoextraModule,
    BemVindoModule,
    CustoMensalVariavelModule,
    NgxMaskModule.forRoot(),
    FormsModule,
    BrowserAnimationsModule,
    MyMaterialDesignModule,
    MDBBootstrapModule.forRoot(),
    LoginModule,
    DashboardModule,
    AppRoutingModule,
    ConfEstoqueModule
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [],
  bootstrap: [LoginComponent],
})

export class AppModule { }

@Edit:

i imported, declared and exported the DialogConfirmacaoExclusao in app.module but now i receive: "dashboard component is not part of any ngmodule..." but don't make sense but if i declare in app module i lose the perform from my lazy loading, right?



from Lazy loading don't find the declaration of my component

No comments:

Post a Comment