Nsryjdtyk

I'm trying to apply lazy loading in my application, but i receive:

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

custofixo.module.ts:

import { DialogConfirmacaoExclusaoModule } from './../../dialogexclusao/dialog-confirmacao-exclusao.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';

import { NgxCurrencyModule } from "ngx-currency";

import { ReactiveFormsModule } from '@angular/forms';

import { LoadingModule } from '../../loading/loading.module';

import { NgxMaskModule } from 'ngx-mask'

import { MostraToastService } from '../../../services/mostratoast.service';

import { CustoFixoRoutingModule } from './custofixo.routing.module';

//Importação de componentes do módulo

import { CustofixoComponent } from './custofixo.component';

import { MatTooltipModule } from '@angular/material';

import { CustosService } from '../../../services/custos.service';

import { DialogConfirmacaoExclusao } from '../../dialogexclusao/dialog-exclusao.component';

import { AuthService } from '../../../services/auth.service';

import { svgInfoManModule } from '../../svgInfoMan/svgInfoMan.module';



@NgModule({

  imports: [

    CustoFixoRoutingModule,

    CommonModule,

    FormsModule,

    LoadingModule,

    MyMaterialDesignModule,

    HttpClientModule,

    MatMenuModule,

    MatTooltipModule,

    ReactiveFormsModule,

    DialogConfirmacaoExclusaoModule,

    NgxCurrencyModule,

    NgxMaskModule,

    svgInfoManModule,

  ],

  exports:[

    CustofixoComponent

  ],

  declarations: [CustofixoComponent],

  entryComponents:[DialogConfirmacaoExclusao],

  providers:[

    CustosService,

    MostraToastService,

    AuthService

  ]

})



export class CustoFixoModule { }

custofixo.routing.ts: the error is generated in this file. I don't know why my routing don't find my component.

import { NgModule } from '@angular/core';

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

import { CustofixoComponent } from './custofixo.component';









    const custoFixoRoutes: Routes = [

        {

            path: '', component: CustofixoComponent

        }

];



@NgModule({

    imports: [RouterModule.forChild(custoFixoRoutes)],

    exports: [RouterModule]

})



export class CustoFixoRoutingModule {}

In my root routes:

const dashboardRoutes: Routes = [

    {path: 'dash', component: DashboardComponent, canActivate: [AuthGuard],

    children: [

    { path: '', loadChildren: 'src/app/components/dashboard/bemvindo/bemvindo.module#BemVindoModule' },

    { path: 'home', loadChildren: 'src/app/components/dashboard/bemvindo/bemvindo.module#BemVindoModule' },

    { path: 'custofixo', loadChildren: 'src/app/components/dashboard/custofixo/custofixo.module#CustoFixoModule' }

The bemvindomodule works well, but my custoFixoModule have a similar code and don't work.

Restart ng server still don't work

It seems you have not declared the component CustofixoComponent anywhere. You need to add it in the declarations array of the CustoFixoModule.

There are two workarounds

try to break serve and rerun because sometimes cli don't detect the files

OR

imports: [

    CommonModule,

    FormsModule,

    LoadingModule,

    MyMaterialDesignModule,

    CustoFixoRoutingModule, <--- here

    HttpClientModule,

    MatMenuModule,

    MatTooltipModule,

    ReactiveFormsModule,

    DialogConfirmacaoExclusaoModule,

    NgxCurrencyModule,

    NgxMaskModule,

    svgInfoManModule,

  ]

I have read somewhere that order will considered on building the angular app

Please check the updated custofixo.routing.ts file from which the error is thrown:

import { NgModule } from '@angular/core';

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

import { CustofixoComponent } from './custofixo.component';

const custoFixoRoutes: Routes = [

  {

    path: '',

    pathMatch: 'full', // <-- Add pathMatch and check again

    component: CustofixoComponent

  }

];

@NgModule({

  imports: [RouterModule.forChild(custoFixoRoutes)],

  exports: [RouterModule]

})

export class CustoFixoRoutingModule { }

For more details, please check here

You cannot import lazy loaded module into another module. You can move the component to shared module and import that module in lazyloaded modules

AppModule

SharedModule

LazyLoadedModule1 - SharedModule

LazyLoadedModule2 - SharedModule

LazyLoadedModule3 - SharedModule