找不到Angular2 http服务

Question

无法获得一个简单的http服务在angular2中工作。 出于某种原因，我刚刚获得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包：

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

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

Answer 2

这是因为默认情况下您的'http.dev.js'不是来源的

第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

添加导入并添加'HTTP_PROVIDERS'

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 个解决方案

解决方案1
14 2016-02-26 19:47:47

解决方案2
2 2016-04-26 09:35:38

解决方案3
0 2016-01-19 14:55:53

找不到Angular2 http服务

问题描述

3 个解决方案

解决方案1 14 2016-02-26 19:47:47

解决方案2 2 2016-04-26 09:35:38

解决方案3 0 2016-01-19 14:55:53

解决方案1
14 2016-02-26 19:47:47

解决方案2
2 2016-04-26 09:35:38

解决方案3
0 2016-01-19 14:55:53