Lazy loading don't find the declaration of my component

Question

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?

Answer 1

You should check the usage of .forRoot vs. .forChild in the routing modules. As the app module lazily loads the dashboard modules, it should be the other way around (at least that is how I successfully modularized my projects' routing):

imports: [RouterModule.forChild(dashboardRoutes)],

and

imports:[RouterModule.forRoot(appRoutes)],

Link to Angular Docs

Answer 2

You have to change/swap RouterModule forChild and forRoot functions in AppRoutingModule respectively DashbooardRoutingModule. In AppRoutingModule the router should be imported with forRoot. You can have only one forRoot in your application and it must be used for your main routing definition:

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

DashboardRoutingModule must use RouterModule with forChild function. Every lazy loaded module which contains sub-routing, must be initialized with forChild:

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

IMPORTANT: Be sure not to include DashboardModule in the AppModule.

Also don't forget to import DashboardRouterModule into DashboardModule, respectively AppRoutingModule into AppModule

Answer 3

There could be three posible solutions:

a) Using relative path loadChildren: './...

b) Using absolute path starting with loadChildren: 'src/app/...

c) tsconfig.app.json --> BaseUrl: "./"

Actually, the problem comes from typescript config.

Before NG 6, the scaffold generated by CLI set the BaseUrl in tsconfig.app.json which is located inside /src. Currently, it is set by tsconfig.json located outside /src, but continues pointing to ./. Because of this, loadChildren path to module should be relative or include src folder.