Question

我是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;
    });
  }
}

Answer 1

您正在尝试“导入” SomeModule中的组件。

imports: [
  CommonModule,
  SomeComponent
],

您 import 模块和 declare 组件，这正是错误消息告诉您的内容–您尝试导入指令SomeComponent。

模块'SomeModule'导入了意外的指令'SomeComponent'。

将SomeComponent从imports移到declarations。

imports: [
  CommonModule,
],
providers: [SomeService],
declarations: [
  SomeComponent,
],

Answer 2

将SomeComponent移到声明部分。

NgModule({
  imports: [
    CommonModule

  ],
  providers: [SomeService],
  declarations: [SomeComponent]

})
export class SomeModule {
}

Answer 3

我遇到了同样的问题。

我创建了一个pipe并将其放在module内，以便可以被多个组件访问。

我在做什么错了？

@NgModule({
  declarations: [
    CustomDatePipe, // declarating pipe class instead of importing pipe module
  ]
})
export class AppModule { }

如何解决此问题？

在pipe-module中导入AppModule，即

@NgModule({
  imports: [
    CustomDateModule,
  ]
})
export class AppModule { }

Answer 4

您必须在嵌套模块中声明该组件。

在嵌套模块中尝试。

@NgModule({
  imports: [
    CommonModule,
  ],
  providers: [SomeService],
  declarations: [SomeComponent],
  exports: [SomeComponent]
})
export class SomeModule {
}

角度错误：请添加@NgModule批注

4 个答案:

如何解决此问题？