Если Ваш не используют ленивую загрузку, необходимо импортировать HomeComponent в app.module и упомянуть это под объявлениями. Кроме того, не забывайте удалять из импорта

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

В моем случае я только должен перезапустить сервер (это - то, если Вы используете ng serve).

Это происходит со мной каждый раз, когда я добавляю новый модуль, в то время как сервер работает.

В моем случае я пропускал свой новый сгенерированный компонент в declarations в app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    ....
    NewGeneratedComponent, //this was missing
    ....
  ],
  imports: [
    ....

У меня была та же проблема. Причина состояла в том, потому что я создал компонент, в то время как мой сервер все еще работал. Решение состоит в том, чтобы выйти из сервера и подачи ng снова.

В моем случае импорт реальных маршрутов в app.component.spec.ts вызывал эти сообщения об ошибках. Решение состояло в том, чтобы импортировать 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();
  }));

});

Я столкнулся с этим сообщением об ошибке в 2 отдельных случаях с ленивой загрузкой в Угловых 7, и вышеупомянутое не помогло. Для обоих из ниже для работы НЕОБХОДИМО остановить и перезапустить подачу ng для него для завершенного обновления правильно.

1) В первый раз я так или иначе неправильно импортировал свой AppModule в ленивый загруженный модуль функции. Я удалил этот импорт из ленивого загруженного модуля, и он начал работать снова.

2) Во второй раз у меня был отдельный CoreModule, который я импортировал в AppModule И тот же ленивый загруженный модуль как № 1. Я удалил этот импорт из ленивого загруженного модуля, и он начал работать снова.

В основном, проверьте свою иерархию импорта и обратите пристальное внимание на порядок импорта (если они импортируются, где они должны быть). Ленивым загруженным модулям только нужен их собственный компонент маршрута / зависимости. Приложение и родительские зависимости будут переданы, импортируются ли они в AppModule или импортируются из другого модуля функции, который НЕ является - ленив загруженный и уже импортированный в родительском модуле.

Я столкнулся с этой той же проблемой и ни одним из того, что я видел, здесь работал. При списке Компонента в проблеме приложения-routing.module, Вы, возможно, столкнулись с той же проблемой, которую я имел.

приложение-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 { }

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

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

я не буду утверждать, что понял точно, почему дело обстоит так, но при использовании индексирующий для экспорта компонентов (и я принял бы то же для сервисов, и т.д.), при ссылке на тот же компонент в отдельных модулях необходимо импортировать их из того же файла, в этом случае индекс, для предотвращения этой проблемы.

В моем случае, Угловых 6, я переименовал имена папок и имена файлов моих модулей от google.map.module.ts до google-map.module.ts. для компиляции без наложения со старым модулем и именами компонентов, ng компилятор, скомпилированный без ошибки.

В app.routes.ts:

     {
        path: 'calendar', 
        loadChildren: './views/app-calendar/app-calendar.module#AppCalendarModule', 
        data: { title: 'Calendar', breadcrumb: 'CALENDAR'}
      },

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

В google-map.module.ts:

import { GoogleMapRoutingModule } from './google-map.routing';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CommonModule,
    GoogleMapRoutingModule,
  ],
  exports: [GoogleMapComponent],
  declarations: [GoogleMapComponent]
})
export class GoogleMapModule { }

Я столкнулся с той же проблемой. Я создал другой компонент с тем же именем под другой папкой. таким образом в моем модуле приложения я должен был импортировать оба компонента, но с приемом

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

Затем в объявлениях я мог добавить AdminDuplicateComponent вместо этого.

Просто мысль, что я оставил бы это там для дальнейшего использования.

если Вы используете ленивую загрузку, затем должен загрузить тот модуль в любом модуле маршрутизатора, как в приложении-routing.module.ts {соединяют:'home каналом', loadChildren: './home.module#HomeModule'}