Question

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

}

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

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

Answer 4

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

角度延迟加载

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

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

Answer 6

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

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

Answer 7

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

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

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

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

Answer 8

就我而言，我在declarations的{{1}}中缺少了新生成的组件：

app.module.ts

Answer 9

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

不正确：

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

正确：

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

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

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

在我的情况下，我正在将组件UserComponent从一个模块appModule移到另一个dashboardModule，却忘记从上一个模块{{1} }在AppRoutingModule文件中。

appModule

删除路线定义后，效果很好。

Answer 13

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

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

Answer 14

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

真正的问题

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

Answer 15

在某些情况下，当您为HomeComponent创建一个模块并且在app-routing.module中直接给它们提供

时，可能会发生同样的情况。

组件：HomeComponent， loadChildren：“ ./ modules /.../ HomeModule.module＃HomeModule” 。

当我们尝试延迟加载时，我们只会赋予loadChildren属性。

Answer 16

先决条件： 1.如果您有多个模块 2.并且您正在使用另一个模块（假设AModule）中的另一个模块（假设AModule）中的组件（假设DemoComponent）

那么您的AModule应该是

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

您的BModule应该是

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

Answer 17

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

Answer 18

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

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

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

Answer 20

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

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

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

查看操作方法：

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

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

Answer 21

我的案子与提到的@ 7guyo相同。我正在使用lazyloading，并且一直在这样做：

node_modules

代替：

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

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

Answer 22

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

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

22 个答案: