If you are not utilizing lazy loading, make sure to import your HomeComponent in the app.module file and include it under declarations. Additionally, do not forget to exclude it 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';
// include 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 { }

Personally, I find that simply restarting the server solves the issue (especially when using ng serve).

This problem seems to occur for me whenever I attempt to add a new module while the server is already running.

When I encountered this issue, the problem was that I had forgotten to include my newly generated component in the declarations section of the app.module.ts file:

@NgModule({
  declarations: [
    AppComponent,
    ....
    NewGeneratedComponent, //I forgot to add this
    ....
  ],
  imports: [
    ....

Encountered a similar issue myself. It turned out that the problem arose from creating a component while the server was still active. The fix is simple - just stop the server and re-run ng serve.

If you happen to be utilizing lazy loading and prefer importing modules using function form import statements, one common mistake is importing the routing module instead of the page module. So:

This is Incorrect:

loadChildren: () => import('./../home-routing.module').then(m => m.HomePageRoutingModule)

The Correct Way:

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

You might not encounter issues immediately, but over time this error will start causing problems.

I encountered this particular error message twice while working with lazy loading in Angular 7, and the solutions provided above did not resolve the issue for me. However, I found that in order for both fixes to take effect, it was necessary to stop and restart 'ng serve' for the changes to be applied correctly.

On the first occasion, I realized that I had mistakenly imported my AppModule into a lazy loaded feature module. Once I removed this import from the lazy loaded module, the functionality started working as expected once again.

The second time I faced this issue, I noticed that I had a separate CoreModule being imported into both the AppModule and the same lazy loaded module mentioned in the first case. Removing this import from the lazy loaded module resolved the issue.

In summary, it's important to carefully examine the hierarchy of imports in your project and ensure that they are in the correct order. Lazy loaded modules should only include their own route component and dependencies. Any application or parent dependencies will automatically be inherited if they are properly structured within the application architecture.

My issue was resolved by changing the imports in app.component.spec.ts. Instead of importing real routes, I needed to import RouterTestingModule.

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

});

Discovering the Benefits of Angular Lazy Loading

In a recent project, I made the mistake of re-importing a component that was already included in a child module imported in the routing.ts file.

....
...
 {
path: "clients",
component: ClientsComponent,
loadChildren: () =>
  import(`./components/users/users.module`).then(m => m.UsersModule)
}
.....
..

I encountered a similar issue and none of the solutions provided here seemed to work for me. If you have included your Component in the app-routing.module, you might be facing the same challenge that I experienced.

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 cannot provide a full explanation as to why this happens, but when using indexing to export components (and potentially services), referencing the same component in different modules requires importing them from the same file, like the index file, to prevent encountering this issue.

Review your implementation of the Lazy module, as it seems that importing AppRoutingModule in the lazy module is causing some issues. Some users have reported that removing this import along with other imports related to AppRoutingModule has resolved similar problems.

import { AppRoutingModule } from '../app-routing.module'; 

For my Angular 6 project, I decided to make some changes by renaming the folder and file names of my modules. Specifically, I changed google.map.module.ts to google-map.module.ts. This adjustment allowed me to compile without any conflicts with the old module and component names, as the ng compiler ran successfully. https://i.sstatic.net/cQKVh.png

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

Encountered a similar issue before. I mistakenly created another component with the same name in a different directory. To resolve this in my application module, I had to import both components using a workaround.

import {DuplicateComponent as AdminDuplicateComponent} from '/the/path/to/the/component';

Then, in the declarations section, I added AdminDuplicateComponent instead.

Sharing this for any future instances of the same problem.

Here are two simple steps to fix this issue:

First, make sure to add your component (HomeComponent) to both the declarations and entryComponents arrays.

Since this component is not accessed through a selector or router, adding it to the entryComponnets array is crucial.

Follow these instructions:

@NgModule({
  declarations: [
    AppComponent,
    ....
    HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ...

  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [HomeComponent]
})
export class AppModule {} 

During a recent update, I needed to transfer the UserComponent from the original module appModule to a new module called dashboardModule. Unfortunately, I overlooked removing the route declaration from the routing setup in the previous module, appModule, within the AppRoutingModule file.

const routes = [
 { path: 'user', component: UserComponent, canActivate: [AuthGuard]},...]

Once I corrected this by deleting the unnecessary route definition, everything functioned correctly again.

I encountered this issue because I had a component with the same name in two separate modules. Although typically you can use exporting techniques if the component is meant to be shared, in my case both components needed to have the same name for different purposes.

Uncovering the Root Cause

While attempting to import component B, the code editor mistakenly suggested the path for Component A due to intellisense confusion. By manually selecting the correct path for the second component from the intellisense options, I was able to resolve the issue successfully.

When implementing lazy loading, ensure to load the module in a router module such as in app-routing.module.ts {path:'home',loadChildren:'./home.module#HomeModule'}

My situation mirrors what @7guyo discussed. I was implementing lazy loading and inadvertently wrote the following:

import { component1Route } from './path/component1.route';

export const entityState: Routes = [
{
   path: 'home',
   children: component1Route
}]

Instead of that, it should have been:

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

When implementing lazy loading in your application, it's important to remove your component's module and routing module from the main app module. Failure to do so may result in the modules being loaded at app startup, causing errors.

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule,
      AppRoutingModule,
      // YourComponentModule,
      // YourComponentRoutingModule
   ],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

My mistake was importing the wrong module in my case. Instead of importing the DemoModule, I mistakenly imported the routing module (DemoRoutingModule) in the module place.

Incorrect Import:

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

Correct Code

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

Make sure to double check that your component has been correctly included in the app-routing.module.ts file. I encountered this issue myself recently

There are times when you may encounter a similar situation where you have developed a module for HomeComponent and in the app-routing.module, you have specified both

component: HomeComponent, loadChildren:"./modules/.../HomeModule.module#HomeModule" in the Routes array.

During lazy loading, we only need to provide the loadChildren attribute.