Can't be able to inject httpmodule into custom service, Angular 2 Error Can't resolve all parameters for TypeDecorator

Question

I am an angular 2 beginner and I was following a tutorial... but got stuck at this point. I am not able to move forward cause I am not able to inject HTTP service inside the custom service(message.service.ts).

I Tried to find figure it out,I found this is happening due to "CIRCULAR DEPENDENCY" but I am not able to solve this.

Edit : I tried with HttpClient also... but no luck!

Please help me with some correct line of codes so,this would make this code working again.

// message.service.ts

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/Rx'
import 'rxjs/add/operator/catch'
import 'rxjs/add/observable/throw';
import { Observable } from 'rxjs';
import { Message } from './message.model';

@Injectable    <--- If i am removing this injectable code is working fine
export class MessageService {
    private messages: Message[] = [];

    constructor(private http: Http) {} <-- and I need to comment out this too.. to avoid DI.

    url: string = 'http://localhost:3000/message';

    addMessage(message: Message) {
        this.messages.push(message);
        const body = JSON.stringify(message);
        const headers = new Headers({'Content-Type': 'application/json'});
        return this.http.post(this.url, body, {headers: headers})
            .map((response: Response) => response.json())
            .catch((error: Response) => Observable.throw(error.json())); <--- In this line catch is showing unresolved function.
    }

    getMessages() {
        return this.messages;
    }

    deleteMessage(message: Message) {
        this.messages.splice(this.messages.indexOf(message), 1);
    }
}

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { MessageComponent } from "./messages/message.component";
import { MessageListComponent } from "./messages/message-list.component";
import { MessageInputComponent } from "./messages/message-input.component";
import { MessagesComponent } from "./messages/messages.component";
import { AuthenticationComponent } from "./auth/authentication.component";
import { HeaderComponent } from "./header.component";
import { routing } from "./app.routing";
import { LogoutComponent } from "./auth/logout.component";
import { SignupComponent } from "./auth/signup.component";
import { SigninComponent } from "./auth/signin.component";
import { HttpModule } from '@angular/http';

@NgModule({
    declarations: [
        AppComponent,
        MessageComponent,
        MessageListComponent,
        MessageInputComponent,
        MessagesComponent,
        AuthenticationComponent,
        HeaderComponent,
        LogoutComponent,
        SignupComponent,
        SigninComponent
    ],
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        routing,
        ReactiveFormsModule],
    bootstrap: [AppComponent]
})
export class AppModule {

}

// Error Stacktrace:

compiler.js?7e34:485 Uncaught Error: Can't resolve all parameters for TypeDecorator: (?).
    at syntaxError (compiler.js?7e34:485)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js?7e34:15700)
    at CompileMetadataResolver._getTypeMetadata (compiler.js?7e34:15535)
    at CompileMetadataResolver._getInjectableMetadata (compiler.js?7e34:15515)
    at CompileMetadataResolver.getProviderMetadata (compiler.js?7e34:1587

Answer 1

Add () to your Injectable

@Injectable()
export class MessageService