Angular 2 个 HTTP "Cannot resolve all parameters for 'AppService'"

Question

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

Cannot resolve all parameters for 'AppService'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AppService' is decorated with Injectable.

以下是一些代码片段：

<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 文件加载到数据 table 中。非常简单的东西，但我加载 Http 模块的方式似乎是错误的。任何帮助将不胜感激。

Answer 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());
    }
}

Answer 2

另一种可以在将来节省一些输入的方法是：

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

简单 tsconfig.json 的示例是：

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

Answer 3

我遇到了同样的问题，对我来说，问题是我在 app.module.ts

中缺少 import { HttpModule } from '@angular/http'

Answer 4

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

import 'core-js/es7/reflect';

Angular 2 个 HTTP "Cannot resolve all parameters for 'AppService'"

Angular 2 HTTP "Cannot resolve all parameters for 'AppService'"

typescript

systemjs

angular2-services

angular2-injection

angular