Компонент не є частиною жодного модуля NgModule, або модуль не був імпортований у ваш модуль

Я будую кутовий додаток 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).

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

У моєму випадку мені не вистачало нового створеного компонента в declarationsat app.module.ts:

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

У мене була та сама проблема. Причиною було те, що я створив компонент, поки мій сервер все ще працював. Рішення полягає в тому, щоб закрити сервер і знову подати послугу.

Звичайною причиною, ЯКЩО ви використовуєте ліниве завантаження та оператори імпорту форми функцій, є імпорт модуля маршрутизації замість модуля сторінки . Так:

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

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, і вищезазначене не допомогло. Щоб обидва наведені нижче функції працювали, ПОВИННІ зупинитись і перезапустити службу, щоб вона повністю оновилася правильно.

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

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

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

Кутове ліниве навантаження

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

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

Я зіткнувся з цим самим питанням, і жодне з того, що я бачив тут, не працювало. Якщо ви додаєте свій компонент до списку 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 { }

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

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

У моєму випадку, 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.

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

Перевірте свій модуль Ледачий, я імпортував AppRoutingModule в модуль ледачого. Після видалення імпорту та імпорту 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. Я використовую lazyloading і несвідомо робив це:

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

Виправити це можна простими двома кроками:

Додайте свій componnet (HomeComponent) до declarationsмасиву entryComponentsмасиву.

Оскільки цей компонент не має доступу ні до селектора перекидання, ні до маршрутизатора, додавання цього до масиву 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 ви безпосередньо надали обидва

компонент: HomeComponent, loadChildren: "./ modules /.../ HomeModule.module # HomeModule" в масиві Маршрути.

коли ми намагаємося ліниве завантаження, ми надаємо лише атрибут loadChildren.

Я отримав цю помилку, тому що у мене однакова назва компонента в 2 різних модулях. Одне з рішень - якщо спільно використовувати техніку експорту тощо, але в моєму випадку обидва мали бути названі однаково, але мета була іншою.

Справжнє питання

Отже, під час імпорту компонента B, intellisense імпортував шлях до компонента A, тому мені довелося вибрати другий варіант шляху до компонента з intellisense, і це вирішило мою проблему.