组件不是任何 NgModule 的一部分，或者该模块尚未导入您的模块答案

【问题标题】：Component is not part of any NgModule or the module has not been imported into your module组件不是任何 NgModule 的一部分，或者该模块尚未导入您的模块
【发布时间】：2017-12-03 07:46:43
【问题描述】：

我正在构建一个 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 添加到entryComponents
entryComponents是什么意思
阅读here，您可以这样做：@NgModule({ imports: [ CommonModule ], exports: [HomeComponent], declarations: [HomeComponent], entryComponents: [HomeComponent] })

标签： angular typescript

【解决方案1】：

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

真正的问题

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

【讨论】：

【解决方案2】：

在某些情况下，当您为 HomeComponent 创建一个模块时，可能会发生同样的情况，而在 app-routing.module 中您直接给出了这两个

组件：HomeComponent， loadChildren:"./modules/.../HomeModule.module#HomeModule" 在 Routes 数组中。

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

【讨论】：

【解决方案3】：

先决条件： 1.如果您有多个模块 2. 你正在使用来自不同模块（假设 AModule）的组件（假设 DemoComponent），在不同模块中（假设 BModule）

那么你的 AModule 应该是

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

你的 BModule 应该是

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

【讨论】：

【解决方案4】：

在我的例子中，我将组件 UserComponent 从一个模块 appModule 移动到另一个 dashboardModule 并忘记从 AppRoutingModule 文件中前一个模块appModule 的路由中删除路由定义。

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

在我删除路由定义后，它工作正常。

【讨论】：

【解决方案5】：

检查您的延迟模块，我已经在延迟模块中导入了 AppRoutingModule。删除 AppRoutingModule 的导入和导入后，Mine 开始工作。

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

【讨论】：

【解决方案6】：

验证您的组件已正确导入 app-routing.module.ts。就我而言，这就是原因

【讨论】：

【解决方案7】：

如果您使用延迟加载且function form import statements 的常见原因是导入路由模块 而不是页面模块。所以：

不正确：

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

正确：

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

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

【讨论】：

【解决方案8】：

就我而言，我输入错误，在模块位置而不是导入模块（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)}]
  }
];

【讨论】：

【解决方案9】：

当您使用延迟加载时，您需要从应用模块中删除组件的模块和路由模块。如果你不这样做，它会在应用启动时尝试加载它们并抛出该错误。

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

【讨论】：

【解决方案10】：

您可以通过简单的两个步骤来解决此问题：

将您的组件（HomeComponent）添加到 declarations 数组 entryComponents 数组。

由于该组件既不访问 throw 选择器也不访问路由器，将此添加到 entryComponnets 数组很重要

看看怎么做：

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

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

【讨论】：

【解决方案11】：

我的情况与提到的@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 {}

【讨论】：

【解决方案12】：

角度延迟加载

在我的情况下，我忘记并重新导入了一个组件，该组件已经是 routing.ts 中导入的子模块的一部分。

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

【讨论】：

【解决方案13】：

如果您使用延迟加载，则必须在任何路由器模块中加载该模块，例如 app-routing.module.ts {path:'home',loadChildren:'./home.module#HomeModule'}

【讨论】：

【解决方案14】：

就我而言，我在declarationsapp.module.ts 中缺少我新生成的组件：

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

【讨论】：

一直在使用延迟加载功能并最终发表了评论。谢谢！
这就是我的答案！另外，如果是路由组件，则在 app-routing-module.ts 中设置声明

【解决方案15】：

我遇到了同样的问题。我在不同的文件夹下创建了另一个同名的组件。所以在我的应用程序模块中，我必须导入两个组件，但有一个技巧

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

然后在声明中我可以添加 AdminDuplicateComponent。

只是想我会把它留在那里以备将来参考。

【讨论】：

【解决方案16】：

我在 2 次不同的情况下遇到此错误消息，在 Angular 7 中使用延迟加载，以上没有帮助。要使以下两项工作，您必须停止并重新启动 ng serve 以使其完全正确更新。

1) 我第一次以某种方式错误地将我的 AppModule 导入到延迟加载的功能模块中。我从延迟加载的模块中删除了这个导入，它又开始工作了。

2) 第二次我有一个单独的 CoreModule，我将它导入 AppModule 和与 #1 相同的延迟加载模块。我从延迟加载的模块中删除了这个导入，它又开始工作了。

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

【讨论】：

【解决方案17】：

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

【讨论】：

不幸的是，这解决了问题，但我真的不明白为什么<Custom>RouterModule 必须导出组件。

【解决方案18】：

我遇到了同样的问题，我在这里看到的都没有工作。如果您在 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 { }

我不会声称完全理解为什么会这样，但是当使用索引来导出组件时（我会假设服务等也是如此），当在单独的模块中引用相同的组件时，您需要导入它们来自同一个文件，在本例中为索引，以避免此问题。

【讨论】：

【解决方案19】：

在我的情况下，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();
  }));

});

【讨论】：

【解决方案20】：

我遇到了同样的问题。原因是我在服务器仍在运行时创建了一个组件。解决办法是退出服务器，重新ng服务。

【讨论】：

【解决方案21】：

就我而言，我只需要重新启动服务器（也就是说，如果您使用的是ng serve）。

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

【讨论】：

bang head Angular 新手，这让我很头疼。重启了服务器，效果很好。

【解决方案22】：

如果你没有使用延迟加载，你需要在 app.module 中导入你的 HomeComponent 并在声明中提及它。另外，不要忘记从导入中删除

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

【讨论】：

我仍然收到错误 Component HomeComponent is not part of any NgModule 或该模块尚未导入到您的模块中。
检查您的导入路径是否有组件。也许很容易发现你是否可以在这里更新你当前的代码
如果您使用延迟加载会怎样？
angular-2-training-book.rangle.io/handout/modules/… - 如果有人想使用延迟加载，此链接可能会有所帮助
是的，这不是破坏了拥有 HomeModule 的目的吗？