angular - 如何在 angular2 GA 中使用 Http 提供程序？

Question

我正在尝试使用 Angular 2 Http 服务，但我得到了

Can't resolve all parameters for AppComponent: (?)

有这个签名

 constructor(public http:Http){ }

我将问题追溯到声明 Http 的提供程序。

In the angular 2 quickstart他们说

In this demo, we register providers by importing other NgModules to our root NgModule.

但是我已经有了

@NgModule({
    imports: [ BrowserModule, HttpModule, FormsModule ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

所以，我理解提供商应该没问题。

在文件 http.d.ts 的代码文档中我发现:

 * import {Http, HTTP_PROVIDERS} from '@angular/http';

但是当我尝试编写此内容时，我发现 HTTP_PROVIDERS 不存在(我猜它是在 GA 之前)

解决此错误的唯一方法是在签名中添加@Inject(Http)。

如何在签名中不添加 @Inject(Http) 的情况下使其工作？

这是我的 systemjs 配置

  <script>
        System.config({
            transpiler: 'typescript',
            map: {
                '@angular/core': './node_modules/@angular/core/bundles/core.umd.js',
                '@angular/platform-browser-dynamic': './node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/platform-browser': './node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/compiler': './node_modules/@angular/compiler/bundles/compiler.umd.js',
                '@angular/common': './node_modules/@angular/common/bundles/common.umd.js',
                '@angular/http': './node_modules/@angular/http/bundles/http.umd.js',
                '@angular/forms': './node_modules/@angular/forms/bundles/forms.umd.js',
                'rxjs': './node_modules/rxjs'
            },
            packages: {
                './app': {
                    defaultExtension: 'ts'
                },
                '@angular/http':{
                    defaultExtension:'ts'
                },
                'rxjs': {
                    defaultExtension: 'js'
                }
            }
        })

        System.import('./app/main.ts').catch(function (err) {
            console.error(err);
        });

    </script>

这是我的 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

您可以在https://github.com/GuyMograbi/angular2-simple-setup查看我的所有代码

Answer 1

您应该将 typescriptOptions 添加到您的 systemjs 配置

index.html

 System.config({
    transpiler: 'typescript',
    typescriptOptions: {
     "emitDecoratorMetadata": true
    },
    map: {
    ....

另请参阅angularjs 2.0: Can't inject anything through component constructor()

您的配置中未使用您的tsconfig.json。您正在即时转译文件。你可以看一下这个简单的种子项目https://github.com/alexzuza/angular2-typescript-systemjs