组件不是任何 NgModule 的一部分或模块尚未导入到您的模块中

Question

我正在构建一个 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 { }

家庭模块是：

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

主页组件是：

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

}

Answer 1

如果您不使用延迟加载，则需要在 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 { }

Answer 2

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

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

Answer 3

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

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

Answer 4

我有同样的问题。 原因是因为我在服务器仍在运行时创建了一个组件。 解决办法是退出服务器，再次ng serve。

Answer 5

如果您使用延迟加载和函数表单导入语句，通常的原因是导入路由模块而不是页面模块。 所以：

不正确：

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

正确：

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

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

Answer 6

我在 2 个不同的场合遇到了这个错误消息，在 Angular 7 中延迟加载，以上没有帮助。 要使以下两个工作正常运行，您必须停止并重新启动 ng 服务以使其完全正确更新。

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

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

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

Answer 7

在我的情况下， app.component.spec.ts中实际路由的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();
  }));

});

Answer 8

我遇到了同样的问题，我在这里看到的一切都不起作用。 如果您在 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 { }

家/家.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 { }

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

Answer 9

角度延迟加载

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

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

Answer 10

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

Answer 11

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

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

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

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

Answer 12

检查您的 Lazy 模块，我在 Lazy 模块中导入了 AppRoutingModule。 去掉 AppRoutingModule 的导入和导入后，Mine 开始工作了。

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

Answer 13

就我而言，我正在将组件UserComponent从一个模块appModule到另一个dashboardModule ，但忘记从 AppRoutingModule 文件中前一个模块appModule的路由中删除路由定义。

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

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

Answer 14

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

真正的问题

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

Answer 15

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

Answer 16

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

Answer 17

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

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

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

看看怎么做：

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

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

Answer 18

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

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

Answer 19

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

Answer 20

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

Answer 21

先决条件： 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 { }

Answer 22

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

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

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