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

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

}

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

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'; 

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.

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.

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.

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

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.

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

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.

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.

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

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 : () => import('../content/demo/demo-routing.module').then(m => m.DemoRoutingModule)}]
  }
];

Right Code

const routes: Routes = [
  {
  path: '', component: ContentComponent,
  children: [
  { path: '', redirectTo: 'demo' },
  { path: 'demo', loadChildren : () => import('../content/demo/demo.module').then(m => m.DemoModule)}]
  }
];

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: () =>
  import(`./components/users/users.module`).then(m => m.UsersModule)
}
.....
..

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.

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: () => import('./component1/component1.module').then(m => m.ComponentOneModule)
  },
  {
    path: '',
    loadChildren: () => import('./component2/component2.module').then(m => m.ComponentTwoModule)
  }])
  ]})

  export class MainModule {}

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

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: [
    ....

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: () => import('./../home-routing.module').then(m => m.HomePageRoutingModule)

Correct:

loadChildren: () => import('./../home.module').then(m => m.HomePageModule)

You might get away with this for a while, but eventually it will cause problems.

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.

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

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', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [RouterTestingModule]
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    console.log(fixture);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

});

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