Error: Unexpected value 'UserService' declared by the module 'Services' at SyntaxError

Question

Hi I've a problem with the value of UserService

The thing is that I'm not sure if the providers: [UserService] was neeced so I tried to remove it but didn't worked.

Yesterday worked well, nothing changed but this morning stopped working.

I'm using the last Angular2 version and Angular-CLI

@angular/core: 2.4.9
@angular/cli: 1.0.0-rc.1

index.ts

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 ]
    }
  }
}

app.module.ts

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 { }

Any idea of what I'm doing wrong? Thanks

Answer 1

Remove this declarations array from your index.ts file. No need to add in declarations, as @Injectable go in the providers array.

declarations: [
    UserService,
    LevelService,
    AlertService,
    CommentService
],

Answer 2

You should not put providers in declarations. They are for components,directives,pipes etc.

Remove:

 declarations: [
    UserService,
    LevelService,
    AlertService,
    CommentService
  ],