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

Question

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 }},

@GouravGarg, I am using lazyloading for those modules so I specify that. — TAB, Apr 10 '19 at 13:20

score 1 · Accepted Answer · answered Apr 10 '19 at 11:28

1

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 { }

answered Apr 10 '19 at 11:28

Ced

15,847
14
87
146

I cann't understand why this issue resolve after doing so. While similar approach is being used in another application and there isn't any such issue while we haven't include modules in routing module. – TAB Apr 10 '19 at 11:45
I have added another routing module where no such issue is arising. – TAB Apr 10 '19 at 11:54

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

1 Answers1