Component is not part of any NgModule or the module has not been imported into your module

Question

I am building an angular 4 application  I am getting error  Error Component HomeComponent is not part of any NgModule or the module has not been imported into your module    I have created HomeModule and HomeComponent  Which one do I need to refer to the AppModule  I am a bit confused  Do I need to refer HomeModule or HomeComponent  Ultimately what I am looking for is when the user clicks the Home menu  he should be directed to the home component html which will be rendered on the index page   App module is   import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   FormsModule   from   angular forms   import   HttpModule   from   angular http   import   AppComponent   from    app component   import   NavbarComponent   from    navbar navbar component   import   TopbarComponent   from    topbar topbar component   import   FooterbarComponent   from    footerbar footerbar component   import   MRDBGlobalConstants   from    shared mrdb global constants   import   AppRoutingModule   from    app routing   import   HomeModule   from    Home home module     NgModule     declarations        AppComponent      FooterbarComponent      TopbarComponent      NavbarComponent         imports        BrowserModule      HttpModule      AppRoutingModule      HomeModule         providers   MRDBGlobalConstants     bootstrap   AppComponent     export class AppModule       HomeModule is   import   NgModule   from   angular core   import   CommonModule   from   angular common   import   HomeComponent   from    home component     NgModule     imports        CommonModule        exports   HomeComponent     declarations   HomeComponent     export class HomeModule       HomeComponent is   import   Component  OnInit   from   angular core     Component     selector   app-home     templateUrl     home component html     styleUrls      home component css      export class HomeComponent implements OnInit      constructor          ngOnInit

User · Answer

I ran into this error message on 2 separate occasions, with lazy loading in Angular 7 and the above did not help. For both of the below to work you MUST stop and restart ng serve for it to completely update correctly.

1) First time I had somehow incorrectly imported my AppModule into the lazy loaded feature module. I removed this import from the lazy loaded module and it started working again.

2) Second time I had a separate CoreModule that I was importing into the AppModule AND same lazy loaded module as #1. I removed this import from the lazy loaded module and it started working again.

Basically, check your hierarchy of imports and pay close attention to the order of the imports (if they are imported where they should be). Lazy loaded modules only need their own route component / dependencies. App and parent dependencies will be passed down whether they are imported into AppModule, or imported from another feature module that is NOT-lazy loaded and already imported in a parent module.

User · Answer

I ran into the same issue  I had created another component with the same name under a different folder  so in my app module I had to import both components but with a trick  import  DuplicateComponent as AdminDuplicateComponent  from   the path to the component     Then in declarations I could add AdminDuplicateComponent instead   Just thought that I would leave that there for future reference

User · Answer

You can fix this by simple two steps   Add your componnet HomeComponent  to declarations array entryComponents array      As this component is accesses neither throw selector nor router    adding this to entryComponnets array is important   see how to do    NgModule     declarations        AppComponent               HomeComponent        imports        BrowserModule      HttpModule                  providers        bootstrap   AppComponent     entryComponents   HomeComponent     export class AppModule

User · Answer

if you are using lazy loading then must load that module in any router module   like in app-routing module ts  path  home  loadChildren    home module HomeModule

User · Answer

My case is same as  7guyo mentioned  I m using lazyloading and was unconsiously doing this   import   component1Route   from    path component1 route    export const entityState  Routes          path   home      children  component1Route      Instead of    NgModule   imports       RouterModule forChild             path           loadChildren       gt  import    component1 component1 module   then m   gt  m ComponentOneModule               path          loadChildren       gt  import    component2 component2 module   then m   gt  m ComponentTwoModule                 export class MainModule

User · Answer

In my case  i imported wrong  In module place instead of importing module DemoModule  imported routing module DemoRoutingModule   Wrong Import   const routes  Routes           path      component  ContentComponent    children        path      redirectTo   demo         path   demo   loadChildren        gt  import     content demo demo-routing module   then m   gt  m DemoRoutingModule              Right Code  const routes  Routes           path      component  ContentComponent    children        path      redirectTo   demo         path   demo   loadChildren        gt  import     content demo demo module   then m   gt  m DemoModule

User · Answer

Prerequisites   1  If you have multiple Modules  2  And you are using a component  suppose DemoComponent  from a different module  suppose AModule   in a different module  suppose BModule   Then Your AModule should be   NgModule     declarations   DemoComponent     imports        CommonModule        exports   AModule     export class AModule      and your BModule should be   NgModule     declarations        imports        CommonModule  AModule        exports         export class BModule

User · Answer

In my case  I was moving the component UserComponent from one module appModule to anotherdashboardModule and forgot to remove the route definition from the routing of the previous moduleappModule in AppRoutingModule file   const routes        path   user   component  UserComponent  canActivate   AuthGuard          After i removed the route definition it worked fine

User · Answer

The usual cause IF you are using lazy loading and function form import statements is importing the routing module instead of the page module  So   Incorrect   loadChildren       gt  import       home-routing module   then m   gt  m HomePageRoutingModule   Correct   loadChildren       gt  import       home module   then m   gt  m HomePageModule   You might get away with this for a while  but eventually it will cause problems

User · Answer

Angular lazy loading  In my case I forgot and re-imported a component that is already part of imported child module in routing ts               path   clients   component  ClientsComponent  loadChildren       gt    import    components users users module   then m   gt  m UsersModule

User · Answer

In my case  I only need to restart the server  that is if you re using ng serve    It happens to me every time I add a new module while the server is running

User · Answer

Verify your component is properly imported in app-routing module ts  In my case that was the reason

User · Answer

If your are not using lazy loading  you need to import your HomeComponent in app module and mention it under declarations  Also  don t forget to remove from imports  import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import  FormsModule  from   angular forms   import  HttpModule  from   angular http   import   AppComponent   from    app component   import   NavbarComponent   from    navbar navbar component   import   TopbarComponent   from    topbar topbar component   import   FooterbarComponent   from    footerbar footerbar component   import   MRDBGlobalConstants   from    shared mrdb global constants   import  AppRoutingModule  from    app routing   import  HomeModule  from    Home home module      import HomeComponent here   NgModule     declarations        AppComponent      FooterbarComponent      TopbarComponent      NavbarComponent         add HomeComponent here        imports        BrowserModule      HttpModule      AppRoutingModule      HomeModule     remove this         providers   MRDBGlobalConstants     bootstrap   AppComponent     export class AppModule

User · Answer

In my case  Angular 6  I renamed folder and file names of my modules from google map module ts to google-map module ts  In order to compile without overlay with old module and component names  ng compiler compiled with no error    In app routes ts                  path   calendar            loadChildren     views app-calendar app-calendar module AppCalendarModule            data    title   Calendar   breadcrumb   CALENDAR              In google-map routing ts  import   GoogleMapComponent   from    google-map component   const routes  Routes             path      component  GoogleMapComponent  data    title   Coupon Map            NgModule       exports   RouterModule       imports   RouterModule forChild routes      export class GoogleMapRoutingModule       In google-map module ts   import   GoogleMapRoutingModule   from    google-map routing    NgModule     imports        CommonModule      FormsModule      CommonModule      GoogleMapRoutingModule         exports   GoogleMapComponent     declarations   GoogleMapComponent     export class GoogleMapModule

User · Answer

In my case  I was missing my new generated component in the declarations at app module ts    NgModule     declarations        AppComponent               NewGeneratedComponent    this was missing                 imports

User · Answer

In Some case the same may happen when you have created a module for HomeComponent  and in app-routing module you directly given both   component  HomeComponent  loadChildren    modules     HomeModule module HomeModule  in Routes array   when we try lazy loading we do give loadChildren attribute only

User · Answer

When you use lazy load you need to delete your component s module and routing module from app module  If you don t  it ll try to load them when app started and throws that error    NgModule      declarations          AppComponent          imports          BrowserModule        FormsModule        HttpClientModule        AppRoutingModule           YourComponentModule           YourComponentRoutingModule          bootstrap          AppComponent         export class AppModule

User · Answer

I ran into this same issue and none of what I was seeing here was working   If you are listing your Component in the app-routing module issue you may have run into the same problem I was having   app module ts  import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   FormsModule   from   angular forms   import   HttpModule   from   angular http    import   AppComponent   from    app component   import   NavbarComponent   from    navbar navbar component   import   TopbarComponent   from    topbar topbar component   import   FooterbarComponent   from    footerbar footerbar component   import   MRDBGlobalConstants   from    shared mrdb global constants   import  AppRoutingModule  from    app routing   import  HomeModule  from    Home home module      import HomeComponent here   NgModule     declarations        AppComponent      FooterbarComponent      TopbarComponent      NavbarComponent         add HomeComponent here        imports        BrowserModule      HttpModule      AppRoutingModule      HomeModule     remove this         providers   MRDBGlobalConstants     bootstrap   AppComponent     export class AppModule       home index ts  export   from         app-routing module ts  import   NgModule   from   angular core   import   Routes  RouterModule   from   angular router   import   HomeComponent   from    components    const routes  Routes           path   app home   component  HomeComponent          path      redirectTo   app home   pathMatch   full           path        redirectTo   app home         NgModule       imports   RouterModule forRoot routes        exports   RouterModule     export class AppRoutingModule       home home module ts  import   NgModule   from   angular core   import   CommonModule   from   angular common      import   HomeComponent   from    home component   This would cause app to break import   HomeComponent   from        NgModule     imports        CommonModule        exports   HomeComponent     declarations   HomeComponent     export class HomeModule       I won t claim to understand exactly why this is the case  but when using indexing to export components  and I would assume the same for services  etc    when referencing the same component in separate modules you need to import them from the same file  in this case the index  in order to avoid this issue

User · Answer

In my case the imports of real routes in app component spec ts were causing these error messages  Solution was to import RouterTestingModule instead   import   TestBed  async   from   angular core testing   import   AppComponent   from    app component   import   RouterTestingModule   from   angular router testing    describe  AppComponent        gt      beforeEach async      gt        TestBed configureTestingModule         declarations            AppComponent                imports   RouterTestingModule         compileComponents              it  should create the app   async      gt        const fixture   TestBed createComponent AppComponent       console log fixture       const app   fixture debugElement componentInstance      expect app  toBeTruthy

User · Answer

I had the same problem  The reason was because I created a component while my server was still running  The solution is to quit the server and ng serve again

User · Answer

Check your Lazy module   i haved imported AppRoutingModule  in the lazy module  After removing the import and  imports of AppRoutingModule  Mine started working   import   AppRoutingModule   from     app-routing module

User · Answer

I got this error because I had same name of component in 2 different modules  One solution is if its shared use the exporting technique etc but in my case both had to be named same but the purpose was different   The Real Issue  So while importing component B  the intellisense imported the path of Component A so I had to choose 2nd option of the component path from intellisense and that resolved my issue

[angular] Component is not part of any NgModule or the module has not been imported into your module

Examples related to angular