无法将 httpmodule 注入自定义服务，Angular 2 错误无法解析 TypeDecorator 的所有参数

Question

我是 angular 2 初学者，我正在学习教程...但此时卡住了。我无法继续前进，因为我无法在自定义服务中注入 HTTP 服务 (message.service.ts)。

我试图弄清楚，我发现这是由于 "CIRCULAR DEPENDENCY" 而发生的，但我无法解决这个问题。

编辑：我也尝试使用 HttpClient...但没有成功！

请帮助我提供一些正确的代码行，这将使这段代码再次运行。

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

}

// 错误堆栈跟踪：

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

使用 HttpClient 代替 http 进行服务调用

Answer 2

将 () 添加到您的 Injectable

@Injectable()
export class MessageService

Answer 3

当您将一个服务用于另一个服务时，您需要添加@Injectable()。

在您的代码中，您没有在@Injectable 之后添加括号，例如@Injectable()。

这里还需要注意的是，一旦您创建了自定义服务，就需要将其添加到提供程序数组中，就像我们有声明和导入数组一样。并注意将其添加到适当的组件，因为它们是分层的。

至于 HTTPClient，从 angular 4.3 或更高版本开始可用。你没有 Angular 2.

无法将 httpmodule 注入自定义服务，Angular 2 错误无法解析 TypeDecorator 的所有参数

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

angular

angular2-services

node-modules

angular-http