我是Angular的新手,我正在尝试编写一个简单的模块化应用程序。但我得到了以下错误:
未捕获错误:导入的意外指令“somecomponent”
模块“somemodule”。请添加@ngmodule注释。
基本上,我不想导入app.module.ts
中的所有服务和组件,我想模块化代码,结果失败了。
这是app.module.ts
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
HttpClientModule,
ReactiveFormsModule,
SomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
这是嵌套模块:
@NgModule({
imports: [
CommonModule,
SomeComponent
],
providers: [SomeService],
declarations: [],
exports: [SomeComponent]
})
export class SomeModule {
}
这是嵌套组件:
@Component({
selector: 'app-index',
templateUrl: './some.component.html',
styleUrls: ['./some.component.css']
})
export class SomeComponent implements OnInit {
somes: Array<ISome>;
constructor(private http: HttpClient, private service: SomeService) {}
ngOnInit() {
this.getSomes();
}
getSomes() {
this.service.getSomes().subscribe(res => {
this.somes = res;
});
}
}
最佳答案
您试图在SomeModule
中“导入”组件。
imports: [
CommonModule,
SomeComponent
],
导入模块并声明组件,这正是错误消息告诉您的——您尝试导入一个指令
SomeComponent
。模块“somemodule”导入的意外指令“somecomponent”。
将
SomeComponent
从imports
移动到declarations
。imports: [
CommonModule,
],
providers: [SomeService],
declarations: [
SomeComponent,
],