title: Angular error: Please add a @NgModule annotation
body: <p>I am new to Angular and I am trying to write a simple modularized application. But I get the following error:</p>
  
  <blockquote>
    <p>Uncaught Error: Unexpected directive 'SomeComponent' imported by the
    module 'SomeModule'. Please add a @NgModule annotation.</p>
  </blockquote>
  
  <p>Basically, I do not want to import all the services and components in <code>app.module.ts</code>, I wanted to modularize the code and I failed.</p>
  
  <p>This is the <code>app.module.ts</code></p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      HomeComponent
    ],
    imports: [
      BrowserModule,
      RouterModule.forRoot(appRoutes),
      HttpClientModule,
      ReactiveFormsModule,
      SomeModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  </code></pre>
  
  <p>This is nested module:</p>
  
  <pre><code>@NgModule({
    imports: [
      CommonModule,
      SomeComponent
    ],
    providers: [SomeService],
    declarations: [],
    exports: [SomeComponent]
  })
  export class SomeModule {
  }
  </code></pre>
  
  <p>This is the nested component:</p>
  
  <pre><code>@Component({
    selector: 'app-index',
    templateUrl: './some.component.html',
    styleUrls: ['./some.component.css']
  })
  export class SomeComponent implements OnInit {
  
    somes: Array&lt;ISome&gt;;
  
    constructor(private http: HttpClient, private service: SomeService) {}
  
    ngOnInit() {
      this.getSomes();
    }
  
    getSomes() {
      this.service.getSomes().subscribe(res =&gt; {
        this.somes = res;
      });
    }
  }
  </code></pre>