CODEWITHSUNDEEP
angularlazy-loadingng-modules
TAB
TAB

Reputation: 2134

Component is not part of any NgModule or the module has not been imported into your module (lazy loading)

I am working on Angular7 application and getting a strange error that my Component 'x' is not part of any NgModule or the module has not been imported into your module.

Group Module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { GroupRoutingModule } from './group-routing.module';
import { GroupComponent } from './group/group.component';
import { GroupListComponent } from './group-list/group-list.component';

@NgModule({
  declarations: [

   GroupComponent,
   GroupListComponent 

  ],
  imports: [

     CommonModule,
     FormsModule,
     GroupRoutingModule

  ],
  exports: [
    GroupComponent,
    GroupListComponent 
  ]
})
export class GroupModule { }

User Module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CorrCommonModule } from '../../../common/common.module';
import { FormsModule } from '@angular/forms';
import { UserComponent } from './user/user.component';
import { UserRoutingModule } from './user-routing.module';


@NgModule({
  declarations: [
    UserComponent    
  ],
  entryComponents: [
  ],
  imports: [
     CommonModule,
     FormsModule,
     UserRoutingModule
  ],
  exports: [
    UserComponent        
  ]
})
export class UserModule { }

Both of these modules are then added in Security module which is lazy loaded module.

Security Module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule} from '@angular/forms';
import { SecurityRoutingModule } from './security-routing.module';
import { UserModule } from './components/user/user.module';
import { GroupModule } from './components/group/group.module';


@NgModule({
  declarations: [
  ],
    entryComponents: [
    ],
    exports: [
    ],
  imports: [
    CommonModule,
    FormsModule,
    SecurityRoutingModule,
    GroupModule,
    UserModule
  ],
  providers: []
})
export class SecurityModule {}

User-Routing Module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user/user.component';
import { GroupListComponent } from '../group/group-list/group-list.component';

const Routes: Routes = [
  {
    path: 'user',
    component: UserComponent
    },
     {
       path: 'group',
       component: GroupListComponent
     }
];

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

Now when I use GroupListComponent in User-Routing module, I am getting the issue that Component is not part of any NgModule or the module has not been imported into your module

EDIT

This module also use similar approach but there isn't such issue.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CountryComponent } from './country/country.component';
import { CurrencyListComponent } from '../currency/currency-list/currency-list.component';
import { SetupLogComponent } from '../log/setup-log/setup-log.component';
import { RegionListComponent } from '../region/region-list/region-list.component';
import { CityPlaceListComponent } from '../city-place/city-place-list/city-place-list.component';




const Routes: Routes = [
  {
    path: 'country',
    component: CountryComponent
  },
  {
     path: '', pathMatch: 'full',
     component: CountryDetailComponent
     },
     {
     path: 'region',
     component: RegionListComponent
     },
     {
     path: 'currency',
     component: CurrencyListComponent
     },
     {
     path: 'cityplace',
     component: CityPlaceListComponent
     }];




@NgModule({
  imports: [RouterModule.forChild(Routes)],
  exports: [RouterModule],
  declarations: []
})
export class CountryRoutingModule { }

EDIT 2: A part of code from app route

{path: 'security',  loadChildren: './modules/security/security.module#SecurityModule', data: { preload: true }},
{path: 'setup', loadChildren: './modules/setup/setup.module#SetupModule', data: { preload: true }},

Upvotes: 1

Views: 4455

Answers (1)

Ced
Ced

Reputation: 17397

Now when I use GroupListComponent in User-Routing module, I am getting the issue that Component is not part of any NgModule or the module has not been imported into your module

Your UserRoutingModule doesn't import the GroupModule ence why you cannot use it. 

@NgModule({
  imports: [GroupModule, RouterModule.forChild(Routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

Upvotes: 1

Related Questions