组件不是任何 NgModule 的一部分,或者该模块尚未导入到您的模块中(延迟加载)
Component is not part of any NgModule or the module has not been imported into your module (lazy loading)
我正在处理 Angular7 应用程序并收到一个奇怪的错误,我的组件 'x' 不是任何 NgModule 的一部分,或者该模块尚未导入到您的模块中。
组模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { GroupRoutingModule } from './group-routing.module';
import { GroupComponent } from './group/group.component';
import { GroupListComponent } from './group-list/group-list.component';
@NgModule({
declarations: [
GroupComponent,
GroupListComponent
],
imports: [
CommonModule,
FormsModule,
GroupRoutingModule
],
exports: [
GroupComponent,
GroupListComponent
]
})
export class GroupModule { }
用户模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CorrCommonModule } from '../../../common/common.module';
import { FormsModule } from '@angular/forms';
import { UserComponent } from './user/user.component';
import { UserRoutingModule } from './user-routing.module';
@NgModule({
declarations: [
UserComponent
],
entryComponents: [
],
imports: [
CommonModule,
FormsModule,
UserRoutingModule
],
exports: [
UserComponent
]
})
export class UserModule { }
然后将这两个模块添加到延迟加载模块的安全模块中。
安全模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule} from '@angular/forms';
import { SecurityRoutingModule } from './security-routing.module';
import { UserModule } from './components/user/user.module';
import { GroupModule } from './components/group/group.module';
@NgModule({
declarations: [
],
entryComponents: [
],
exports: [
],
imports: [
CommonModule,
FormsModule,
SecurityRoutingModule,
GroupModule,
UserModule
],
providers: []
})
export class SecurityModule {}
用户路由模块:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user/user.component';
import { GroupListComponent } from '../group/group-list/group-list.component';
const Routes: Routes = [
{
path: 'user',
component: UserComponent
},
{
path: 'group',
component: GroupListComponent
}
];
@NgModule({
imports: [RouterModule.forChild(Routes)],
exports: [RouterModule]
})
export class UserRoutingModule { }
现在,当我在 User-Routing 模块中使用 GroupListComponent 时,出现以下问题:Component 不是任何 NgModule 的一部分,或者该模块尚未导入到您的模块中
编辑
这个模块也使用类似的方法,但没有这样的问题。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CountryComponent } from './country/country.component';
import { CurrencyListComponent } from '../currency/currency-list/currency-list.component';
import { SetupLogComponent } from '../log/setup-log/setup-log.component';
import { RegionListComponent } from '../region/region-list/region-list.component';
import { CityPlaceListComponent } from '../city-place/city-place-list/city-place-list.component';
const Routes: Routes = [
{
path: 'country',
component: CountryComponent
},
{
path: '', pathMatch: 'full',
component: CountryDetailComponent
},
{
path: 'region',
component: RegionListComponent
},
{
path: 'currency',
component: CurrencyListComponent
},
{
path: 'cityplace',
component: CityPlaceListComponent
}];
@NgModule({
imports: [RouterModule.forChild(Routes)],
exports: [RouterModule],
declarations: []
})
export class CountryRoutingModule { }
编辑 2:
部分代码来自app route
{path: 'security', loadChildren: './modules/security/security.module#SecurityModule', data: { preload: true }},
{path: 'setup', loadChildren: './modules/setup/setup.module#SetupModule', data: { preload: true }},
Now when I use GroupListComponent in User-Routing module, I am getting the issue that Component is not part of any NgModule or the module has not been imported into your module
您的 UserRoutingModule 没有导入 GroupModule
为什么您不能使用它。
@NgModule({
imports: [GroupModule, RouterModule.forChild(Routes)],
exports: [RouterModule]
})
export class UserRoutingModule { }
我正在处理 Angular7 应用程序并收到一个奇怪的错误,我的组件 'x' 不是任何 NgModule 的一部分,或者该模块尚未导入到您的模块中。
组模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { GroupRoutingModule } from './group-routing.module';
import { GroupComponent } from './group/group.component';
import { GroupListComponent } from './group-list/group-list.component';
@NgModule({
declarations: [
GroupComponent,
GroupListComponent
],
imports: [
CommonModule,
FormsModule,
GroupRoutingModule
],
exports: [
GroupComponent,
GroupListComponent
]
})
export class GroupModule { }
用户模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CorrCommonModule } from '../../../common/common.module';
import { FormsModule } from '@angular/forms';
import { UserComponent } from './user/user.component';
import { UserRoutingModule } from './user-routing.module';
@NgModule({
declarations: [
UserComponent
],
entryComponents: [
],
imports: [
CommonModule,
FormsModule,
UserRoutingModule
],
exports: [
UserComponent
]
})
export class UserModule { }
然后将这两个模块添加到延迟加载模块的安全模块中。
安全模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule} from '@angular/forms';
import { SecurityRoutingModule } from './security-routing.module';
import { UserModule } from './components/user/user.module';
import { GroupModule } from './components/group/group.module';
@NgModule({
declarations: [
],
entryComponents: [
],
exports: [
],
imports: [
CommonModule,
FormsModule,
SecurityRoutingModule,
GroupModule,
UserModule
],
providers: []
})
export class SecurityModule {}
用户路由模块:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user/user.component';
import { GroupListComponent } from '../group/group-list/group-list.component';
const Routes: Routes = [
{
path: 'user',
component: UserComponent
},
{
path: 'group',
component: GroupListComponent
}
];
@NgModule({
imports: [RouterModule.forChild(Routes)],
exports: [RouterModule]
})
export class UserRoutingModule { }
现在,当我在 User-Routing 模块中使用 GroupListComponent 时,出现以下问题:Component 不是任何 NgModule 的一部分,或者该模块尚未导入到您的模块中
编辑
这个模块也使用类似的方法,但没有这样的问题。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CountryComponent } from './country/country.component';
import { CurrencyListComponent } from '../currency/currency-list/currency-list.component';
import { SetupLogComponent } from '../log/setup-log/setup-log.component';
import { RegionListComponent } from '../region/region-list/region-list.component';
import { CityPlaceListComponent } from '../city-place/city-place-list/city-place-list.component';
const Routes: Routes = [
{
path: 'country',
component: CountryComponent
},
{
path: '', pathMatch: 'full',
component: CountryDetailComponent
},
{
path: 'region',
component: RegionListComponent
},
{
path: 'currency',
component: CurrencyListComponent
},
{
path: 'cityplace',
component: CityPlaceListComponent
}];
@NgModule({
imports: [RouterModule.forChild(Routes)],
exports: [RouterModule],
declarations: []
})
export class CountryRoutingModule { }
编辑 2: 部分代码来自app route
{path: 'security', loadChildren: './modules/security/security.module#SecurityModule', data: { preload: true }},
{path: 'setup', loadChildren: './modules/setup/setup.module#SetupModule', data: { preload: true }},
Now when I use GroupListComponent in User-Routing module, I am getting the issue that Component is not part of any NgModule or the module has not been imported into your module
您的 UserRoutingModule 没有导入 GroupModule
为什么您不能使用它。
@NgModule({
imports: [GroupModule, RouterModule.forChild(Routes)],
exports: [RouterModule]
})
export class UserRoutingModule { }