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

Я создаю приложение angular 4. Я получаю ошибку

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

}

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

Обычная причина, если вы используете ленивую загрузку и операторы импорта функциональной формы, импортирует модуль маршрутизации вместо модуля страницы . Так:

Неправильно :

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

Правильно :

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

На какое-то время это может сойти с рук, но в конечном итоге это вызовет проблемы.

В моем случае 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();
  }));

});

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

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

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

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

Я столкнулся с этой же проблемой, и ничего из того, что я здесь видел, не работало. Если вы указываете свой компонент в проблеме 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 './';

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

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

Angular отложенная загрузка

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

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

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

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

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

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

Просто подумал, что оставлю это на будущее.

Проверьте свой модуль Lazy, я импортировал AppRoutingModule в модуль lazy. После удаления импорта и импорта AppRoutingModule, Mine начал работать.

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

В моем случае я перемещал компонент UserComponentиз одного модуля appModuleв другой dashboardModuleи забыл удалить определение маршрута из маршрутизации предыдущего модуля appModuleв файле AppRoutingModule.

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

После того, как я удалил определение маршрута, он работал нормально.

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

Мой случай такой же, как у @ 7guyo. Я использую ленивую загрузку и неосознанно делал это:

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

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

Вместо того:

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

Вы можете исправить это, выполнив два простых шага:

Добавьте свой компонент (HomeComponent) в declarationsмассив entryComponentsмассивов.

Поскольку этот компонент не имеет доступа ни к селектору throw, ни к маршрутизатору, важно добавить его в массив entryComponnets.

посмотреть, как это сделать:

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

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

Когда вы используете ленивую загрузку, вам необходимо удалить модуль вашего компонента и модуль маршрутизации из модуля приложения. Если вы этого не сделаете, он попытается загрузить их при запуске приложения и выдаст эту ошибку.

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

В моем случае я импортировал неправильно, в месте модуля вместо импорта модуля (DemoModule) импортированный модуль маршрутизации (DemoRoutingModule)

Неправильный импорт:

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

Правильный код

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

Убедитесь, что ваш компонент правильно импортирован в app-routing.module.ts. В моем случае это была причина

Предпосылки: 1. Если у вас несколько модулей 2. И вы используете компонент (предположим, DemoComponent) из другого модуля (предположим, AModule), в другом модуле (предположим, BModule)

Тогда ваш AModule должен быть

@NgModule({
  declarations: [DemoComponent],
  imports: [
    CommonModule
  ],
  exports: [AModule]
})
export class AModule{ }

и ваш BModule должен быть

@NgModule({
  declarations: [],
  imports: [
    CommonModule, AModule
  ],
  exports: [],
})
export class BModule { }

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

component: HomeComponent, loadChildren: "./ modules /.../ HomeModule.module # HomeModule" в массиве маршрутов.

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

Я получил эту ошибку, потому что у меня было одно и то же имя компонента в двух разных модулях. Одно из решений - это совместное использование техники экспорта и т. Д., Но в моем случае оба должны были называться одинаковыми, но цель была другой.

Настоящая проблема

Итак, при импорте компонента B intellisense импортировал путь к компоненту A, поэтому мне пришлось выбрать второй вариант пути к компоненту из intellisense, и это решило мою проблему.