Компонент не является частью какого-либо NgModule или модуль не был импортирован в ваш модуль

Я строю угловое приложение. Я получаю ошибку

Error:Component HomeComponent is not part of any NgModule or the module has not been imported into your module.

Я создал HomeModule и HomeComponent. Какой из них мне нужен для ссылки на AppModule? Я немного смущен. Нужно ли ссылаться на HomeModule или HomeComponent? В конечном итоге, что я ищу, так это когда пользователь щелкает меню "Домой", он должен быть направлен на home.component.html, который будет отображаться на странице индекса.

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

@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent

  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    HomeModule

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

HomeModule это:

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 является:

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

}

Ответ 1

Если вы не используете ленивую загрузку, вам нужно импортировать свой 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 { }

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

});

Ответ 6

Я столкнулся с этим сообщением об ошибке 2 раза, с ленивой загрузкой в Angular 7, и вышеописанное не помогло. Чтобы оба из приведенных ниже работали, вы ДОЛЖНЫ остановиться и перезапустить сервер, чтобы он полностью обновился.

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

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

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

Ответ 7

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

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

главная /index.ts

export * from './';

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

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

Ответ 8

В моем случае, Angular 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 { }

Ответ 9

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

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

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

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

Ответ 10

Пожалуйста, проверьте порядок вашего app.routing.module.ts, может быть опечатка или коммит. и после этого Жесткое обновление браузера (Ctrl + f5) для хрома.

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path:'',component:AboutComponent},
  { path:'',redirectTo:'/home', pathMatch : 'full'},
  { path:'**',component:Page404Component}
];

Ответ 11

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