组件不是任何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）。

每当我在服务器运行时添加新模块时，都会发生这种情况。

就我而言，我在declarationsat 缺少了新生成的组件app.module.ts：

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

我有同样的问题。原因是因为我在服务器仍在运行时创建了一个组件。解决方案是退出服务器，然后再次提供服务。

如果使用延迟加载和函数窗体import语句的常见原因是导入路由模块而不是页面模块。所以：

不正确：

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

正确的：

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

您可能会暂时摆脱这种情况，但最终会导致问题。

我在2次不同的情况下遇到了此错误消息，在Angular 7中进行了延迟加载，而上述操作无济于事。为了使以下两项都能正常工作，您必须停止并重新启动ng，以使其完全正确更新。

1）第一次我以某种方式不正确地将我的AppModule导入了延迟加载的功能模块。我从延迟加载的模块中删除了此导入，并且它再次开始工作。

2）第二次，我有一个单独的CoreModule导入到AppModule中，并且与＃1相同的延迟加载模块。我从延迟加载的模块中删除了此导入，并且它再次开始工作。

基本上，请检查您的导入层次结构，并密切注意导入顺序（如果应按原样导入）。延迟加载的模块仅需要它们自己的路由组件/依赖项。无论是将应用程序和父项依赖项导入到AppModule中，还是从另一个非延迟加载且已导入到父项模块中的功能模块中导入，都将向下传递。

在我的情况下，导入真实路由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();
  }));

});

角延迟加载

就我而言，我忘记了并重新导入了一个组件，该组件已经是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 { }

主页/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，却忘记从appModuleAppRoutingModule文件中的前一个模块的路由中删除路由定义。

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数组entryComponentsarray。

由于此组件既不访问抛出选择器也不访问路由器，因此将其添加到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.并且您正在使用其他模块（假设BModule）中其他模块（假设AModule）的组件（假设DemoComponent）

那么你的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： Routes数组中的“ ./modules/.../HomeModule.module#HomeModule”。

当我们尝试延迟加载时，我们仅提供loadChildren属性。

我收到此错误，是因为我在2个不同的模块中具有相同的组件名称。一种解决方案是，如果共享使用导出技术等，但是在我的情况下，两者都必须命名相同，但目的不同。

真正的问题

因此，在导入组件B时，智能感知导入了组件A的路径，因此我不得不从智能感知中选择组件路径的第二个选项，从而解决了我的问题。