[解決済み】Angularのエラーです。NgModuleアノテーションを追加してください。

質問

私はAngularの初心者で、簡単なモジュール化されたアプリケーションを書こうとしています。しかし、次のようなエラーが発生します。

Uncaught Error: 予期しないディレクティブ '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,
],