Question

无法在angular2中使用简单的http服务。出于某种原因，我刚刚获得404服务。它还没有任何功能，但我似乎DI不起作用。

当我在引导应用程序时添加TestService时，我得到以下内容。获取http://127.0.0.1:8080/testService 404（未找到）

的index.html

<!DOCTYPE html>
<html lang="en-GB">
    <head>
        <title>AngularJS 2 Tutorial Series</title>
        <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
        <script src="https://code.angularjs.org/tools/system.js"></script>
        <script src="https://code.angularjs.org/tools/typescript.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>        
        <script>
            System.config({
                transpiler: 'typescript',
                typescriptOptions: { emitDecoratorMetadata: true }
            });
            System.import('./app/app.ts');
        </script>
    </head>
    <body>

        <my-app>loading...</my-app>

    </body>
</html>

app.ts

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {Injectable} from 'angular2/core'
import {TestService} from 'testService';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>',
})

class AppComponent {
}

bootstrap(AppComponent, [TestService]);

TestService.ts

import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';

@Injectable()
export class TestService {
    constructor(public http: Http){        
    }
}

Answer 1

我刚刚碰到了这个，通过添加对http bundle的脚本引用来修复它：

<script src="node_modules/angular2/bundles/http.dev.js"></script>

在记住我实施路由后添加了类似的资源后尝试了。希望这有助于其他人！

Answer 2

这是因为默认情况下你的＆＃39; http.dev.js＆＃39;没有来源

第1步： index.html

Include 'http.dev.js'

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

第2步： main.ts

添加导入并添加＆＃39; HTTP_PROVIDERS＆＃39;

import {bootstrap}    from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [HTTP_PROVIDERS]);

STEP：3 app.component.ts

导入Http并使用它

import {Http} from 'angular2/http';

constructor(http: Http) {
    http.get('http://jsonplaceholder.typicode.com/posts/1').subscribe((data) => {
      this.response = data._body;
    })
  }

Answer 3

您需要通过提供Http作为提供商来添加它。有两种方法可以实现这一目标：

1）在全局级别，您可以指定何时引导应用程序：

bootstrap(AppComponent, [TestService, Http]);

2）您尝试在其中使用的组件内部：

@Component({
  ...
  providers: [Http]
})
public class ...

注意当您作为提供商提供时，您还必须import / require Http。这将允许角度的DI识别将被注入的内容。

找不到Angular2 http服务

3 个答案: