web-dev-qa-db-ja.com

Angular 2 HTTP "'AppService'のすべてのパラメーターを解決できません"

Httpプロバイダーをサービスにインポートしようとしましたが、次のエラーが表示されます。

「AppService」（？）のすべてのパラメーターを解決できません。すべてのパラメーターがInjectで装飾されているか、有効な型注釈があること、および 'AppService'が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ファイルをデータテーブルにロードしようとしています。かなり簡単なものですが、Httpモジュールのロード方法は間違っているようです。どんな助けも大歓迎です。

typescriptangularsystemjsangular2-servicesangular2-injection
26
ddpdoj

ファイルを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());
    }
}
53
Pankaj Parkar

それを行う別の方法は、将来いくつかの入力を節約することです：

tsconfig.jsonにcompilerOptions.emitDecoratorMetadata=trueを追加します

単純なtsconfig.jsonの例は次のとおりです。

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  }
}
25
Yariv Katz

私は同じ問題を抱えていましたが、私にとって問題は私がimport { HttpModule } from '@angular/http' in app.module.ts

0
Leonardo López

別の可能な解決策は、いくつかのポリフィルが欠落していることです。別の答えが得られなかった場合は、このポリフィルを追加してください。

import 'core-js/es7/reflect';
0
sinedsem