title: Error: Unexpected value 'UserService' declared by the module 'Services' at SyntaxError
body: <p>Hi I've a problem with the value of UserService</p>
  
  <p>The thing is that I'm not sure if the <code>providers: [UserService]</code> was neeced so I tried to remove it but didn't worked.</p>
  
  <p>Yesterday worked well, nothing changed but this morning stopped working.</p>
  
  <p>I'm using the last Angular2 version and Angular-CLI</p>
  
  <pre><code>@angular/core: 2.4.9
  @angular/cli: 1.0.0-rc.1
  </code></pre>
  
  <p>index.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { UserService } from './user/user.service';
  import { LevelService } from './levels/levels.service';
  import { AlertService } from './alert/alert.service';
  import { CommentService } from './comments/comments.service';
  
  @NgModule({
    declarations: [
      UserService,
      LevelService,
      AlertService,
      CommentService
    ],
    providers: [
      UserService,
      LevelService,
      AlertService,
      CommentService
    ]
  })
  export class Services {
    static forRoot() {
      return {
        ngModule: Services,
        providers: [ UserService, LevelService, AlertService, CommentService ]
      }
    }
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  
  import { UIRouterModule } from "ui-router-ng2";
  import { alertaddState } from "./app.states";
  import { alertlistState } from "./app.states";
  import { dashboardState } from "./app.states";
  
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  import { MainComponent } from './modules/main/main.module';
  import { AppFooterComponent } from './components/app-footer/app-footer.component';
  import { AppHeaderComponent } from './components/app-header/app-header.component';
  import { AppSideNavbarComponent } from './components/app-side-navbar/app-side-navbar.component';
  
  import { Services } from './services';
  import { DashboardComponent } from './modules/dashboard/dashboard/dashboard.component';
  import { LevelslistComponent } from './modules/levels/levelslist/levelslist.component';
  import { LevelsaddComponent } from './modules/levels/levelsadd/levelsadd.component';
  import { UserlistComponent } from './modules/user/userlist/userlist.component';
  import { UseraddComponent } from './modules/user/useradd/useradd.component';
  import { AlertlistComponent } from './modules/alert/alertlist/alertlist.component';
  import { AlertaddComponent } from './modules/alert/alertadd/alertadd.component';
  import { CommentslistComponent } from './modules/comments/commentslist/commentslist.component';
  import { CommentsaddComponent } from './modules/comments/commentsadd/commentsadd.component';
  
  import { MyDatePickerModule } from 'mydatepicker';
  
  @NgModule({
    declarations: [
      MainComponent,
      AppFooterComponent,
      AppHeaderComponent,
      AppSideNavbarComponent,
      DashboardComponent,
      LevelslistComponent,
      LevelsaddComponent,
      UseraddComponent,
      UserlistComponent,
      AlertaddComponent,
      AlertlistComponent,
      CommentsaddComponent,
      CommentslistComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      NgbModule.forRoot(),
      UIRouterModule.forRoot(
        { states: [
          dashboardState,
          alertaddState,
          alertlistState
        ], useHash: false }),
      MyDatePickerModule,
      Services.forRoot()
    ],
    providers: [],
    bootstrap: [MainComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Any idea of what I'm doing wrong? Thanks</p>