Unexpected directive 'LoginComponent' imported by the module 'AppModule'. Please add a @NgModule annotation

Question

I'm using Angular 2 and Meteor. Generating Components produces the following error:

Unexpected directive 'LoginComponent' imported by the module 'AppModule'. Please add a @NgModule annotation.

the app.module.ts file is

import { NgModule, ErrorHandler } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MyApp } from './app.component'; import { LoginComponent } from '../../components/login/login.component'; import { SignupComponent } from '../../components/signup/signup.component'; import { ResourcesComponent } from '../../components/resources/resources.component';  import { NavbarComponent } from '../../components/navbar/navbar.component';  @NgModule({   declarations: [     MyApp,     LoginComponent,     SignupComponent,     ResourcesComponent   ],   entryComponents: [     MyApp   ],   imports:[BrowserModule,   LoginComponent,   SignupComponent,   ResourcesComponent   ],   bootstrap: [MyApp] }) export class AppModule {} 

and the login.component.ts file is

import 'zone.js'; import 'reflect-metadata'; import { Component } from '@angular/core'; import template from "./login.html";  @Component({   selector: 'login',   template }) export class LoginComponent {} 

Answer 1

In an NgModule.imports, you can only list modules. Not components. So the problem is here:

imports:[BrowserModule, LoginComponent, SignupComponent, ResourcesComponent ] 

Remove the components, and take a look at the NgModules FAQ

What should I import?

Import modules whose public (exported) declarable classes you need to reference in this module's component templates