Angular 2 HTTP“无法解析‘AppService’的所有参数”答案

【问题标题】：Angular 2 HTTP "Cannot resolve all parameters for 'AppService'"Angular 2 HTTP“无法解析‘AppService’的所有参数”
【发布时间】：2016-02-12 19:09:47
【问题描述】：

我尝试将 http 提供程序导入服务，但出现以下错误：

无法解析“AppService”(?) 的所有参数。确保所有参数都用 Inject 修饰或具有有效的类型注释，并且“AppService”用 Injectable 修饰。

这里有一些代码sn-ps：

<script src="~/es6-shim/es6-shim.min.js"></script>
<script src="~/systemjs/dist/system-polyfills.js"></script>

<script src="~/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/systemjs/dist/system.src.js"></script>
<script src="~/rxjs/bundles/Rx.js"></script>
<script src="~/angular2/bundles/angular2.dev.js"></script>
<script src="~/angular2/bundles/http.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
    System.config({
        map: { 'rxjs': 'RCO/rxjs' },
        packages: {
            RCO: {
                format: 'register',
                defaultExtension: 'js'
            },
            'rxjs': {defaultExtension: 'js'}
        }
    });
  System.import('RCO/Areas/ViewOrganization/AngularTemplates/boot')
      .then(null, console.error.bind(console));

boot.ts

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http'
import 'rxjs/add/operator/map'
import {AppComponent} from  'RCO/Areas/ViewOrganization/AngularTemplates/app.component'
import {AppService} from 'RCO/Areas/ViewOrganization/AngularTemplates/app.service'

bootstrap(AppComponent, [HTTP_PROVIDERS, AppService]);

app.service.ts

import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class AppService {

    constructor(private http: Http) { }

    // Uses http.get() to load a single JSON file
    getTableData() {
        return this.http.get('...').map((res: Response) => res.json());
    }

}

我正在尝试调用服务器上的控制器以最终将 JSON 文件加载到数据表中。非常简单的东西，但我加载 Http 模块的方式似乎是错误的。任何帮助将不胜感激。

【问题讨论】：

你在使用 typescript 编译器吗？如果没有，那么情况就是stackoverflow.com/a/35350172/2435473
解决了...谢谢
这应该像这样工作。但是如果你不使用 TypeScript 而只使用 ES6（方法参数不支持类型），你需要为 Angular2 指定关于注入什么的额外元数据。在这种情况下，@Pankaj's 准确地描述了如何做到这一点;-)

标签： typescript angular systemjs angular2-services angular2-injection

【解决方案1】：

似乎您没有使用typescript 编译器将文件转换为js，在这种情况下，您需要在组件构造函数中注入任何依赖项时使用@Inject。

import {Injectable, Inject} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class AppService {
    constructor(@Inject(Http) private http: Http) { }
    // Uses http.get() to load a single JSON file
    getTableData() {
        return this.http.get('...').map((res: Response) => res.json());
    }
}

【讨论】：

这节省了我的时间。谢谢。
这行得通！。你能告诉我什么是“转译”以及如何使用打字稿编译器来做到这一点
@DhananjayK 而不是在 cmets 中解释，我强烈建议您通过 this article

【解决方案2】：

另一种方法是：

在你的tsconfig.json 添加compilerOptions.emitDecoratorMetadata=true

简单的tsconfig.json 示例如下：

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  }
}

【讨论】：

这拯救了我的一天！

【解决方案3】：

我有同样的问题，对我来说问题是我在app.module.ts 中缺少import { HttpModule } from '@angular/http'

【讨论】：

【解决方案4】：

另一个可能的解决方案是您缺少一些 polyfill。任何没有其他答案的人都应该尝试添加这个 polyfill：

import 'core-js/es7/reflect';

【讨论】：