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

我正在建立一个角4应用程序。我得到了错误

Error:Component HomeComponent is not part of any NgModule or the module has not been imported into your module.

我已经创建了 HomeModule 和 HomeComponent。我需要引用哪一个应用程序模块？我有点困惑。我是否需要参考 HomeModule 或 HomeComponent？最终，我要寻找的是当用户单击 Home 菜单时，他应该被定向到将在索引页面上呈现的 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() {
}


}
248012 次浏览
小开

如果没有使用延迟加载，那么需要在 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 { }
小开

在我的例子中，我只需要重新启动服务器(如果使用 ng serve的话)。

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

小开

I had the same problem. The reason was because I created a component while my server was still running. 解决方案是退出服务器，然后重新开始服务。

小开

在我的例子中，导入 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();
}));


});
小开

我也遇到了同样的问题，但我在这里看到的一切都不起作用。如果您在应用程序路由中列出您的组件。模块问题你可能遇到了和我一样的问题。

应用程序模块

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

主页/索引

export * from './';

应用程序路由模块

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中，我将模块 < strong > 的文件夹和文件名从 google.map.module.ts 重命名为 google-map. module.ts。 In order to compile without overlay with old module and component names, ng compiler compiled with no error. enter image description here

In app.routes.ts:

     {
path: 'calendar',
loadChildren: './views/app-calendar/app-calendar.module#AppCalendarModule',
data: { title: 'Calendar', breadcrumb: 'CALENDAR'}
},

In 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 { }
小开

I ran into this error message on 2 separate occasions, with lazy loading in Angular 7 and the above did not help. For both of the below to work you MUST stop and restart ng serve for it to completely update correctly.

1)我第一次不正确地将 AppModule 导入到延迟加载的特性模块中。我从延迟加载模块中删除了这个导入，它又开始工作了。

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

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

小开

I ran into the same issue. 我在不同的文件夹下创建了另一个具有相同名称的组件。 所以在我的应用程序模块中，我必须同时导入两个组件

从“/the/path/to/the/Component”导入{ DuplicateComponent as AdminDuplicateComponent } ;

然后在声明中添加 AdminDuplicateComponent。

我只是觉得我应该把它留在那里，以备将来参考。

小开

在我的例子中，我在 app.module.ts的 declarations中遗漏了新生成的组件:

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

if you are using lazy loading then must load that module in any router module , like in app-routing.module.ts {path:'home',loadChildren:'./home.module#HomeModule'}

小开

角度延迟加载

在我的例子中，我忘记并重新导入了一个组件，这个组件已经是 outouting.ts 中导入的子模块的一部分。

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

My case is same as @7guyo mentioned. I'm using lazyloading and was unconsiously doing this:

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

你可以通过两个简单的步骤来解决这个问题:

将组件(HomeComponent)添加到 declarations阵列 entryComponents阵列。

As this component is accesses neither throw selector nor router, 将这个数组添加到 entryComponent 数组很重要

了解如何做:

@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 { }
小开

对我来说，我输入错误, In module place instead of importing module(DemoModule) imported routing module(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)}]
}
];
小开

通常情况下，如果你使用延迟加载，而 函数形式导入语句导入的是 路由模块而不是 页面模块，那么:

错误 :

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

正确 :

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

你可能会逃避一段时间，但最终它会造成问题。

小开

验证您的组件是否正确导入到 app-routing. module.ts 中

小开

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

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

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

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

在我删除了路线定义之后，它工作得很好。

小开

Prerequisites: 如果你有多个模块 2.并且您正在不同的模块(假设 BModule)中使用来自不同模块(假设 AModule)的组件(假设 DemoComponent)

那么您的模块应该是

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

你的 BModule 应该是

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

在某些情况下，当您已经为 HomeComponent 创建了一个模块，并且在应用程序路由中，也可能发生同样的情况。模块，你直接给两者

component: HomeComponent, loadChildren:"./modules/.../HomeModule.module#HomeModule" in Routes array.

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

小开

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

真正的问题

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


提交答案