Angular2 http service not found

Question

cant get a simple http service to work in angular2. I just get 404 on the service for some reason. It does not contain any functionality yet, but I seems that the DI does not work.

As soon as I add TestService when bootstrapping the application i get the following. GET http://127.0.0.1:8080/testService 404 (Not Found)

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){        
    }
}

nebulae · Accepted Answer · 2016-02-26 19:47:47Z

14

I just ran into this, fixed it by adding the script reference to the http bundle:

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

Tried it after remembering that I added a similar resource after implementing routing. Hope this helps someone else!

answered Feb 26, 2016 at 19:47

nebulae

2,6651 gold badge20 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2016-04-26 09:38:38Z

This is because by Default your 'http.dev.js' is not sourced

Step 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>

Step 2: main.ts

Add import and add '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

import Http and use it

import {Http} from 'angular2/http';

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

Brocco · Accepted Answer · 2016-01-19 14:55:53Z

0

You will need to add Http by supplying it as a provider. There are 2 ways to accomplish this:

1) at a global level you can specify when you bootstrap the application:

bootstrap(AppComponent, [TestService, Http]);

2) inside the component you are trying to use it within:

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

NOTE you will also have to import/require Http when you are supplying it as a provider. This will allow angular's DI to discern what will be injected.

answered Jan 19, 2016 at 14:55

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

6 Comments

noshitsherlock Over a year ago

For example adding Http to my app.ts and importing Http from 'angular2/http' gives the same error, GET 127.0.0.1:8080/angular2/http 404 (Not Found)

Brocco Over a year ago

You still need to set up Http as a provider, so DI knows how to inject it

noshitsherlock Over a year ago

Still the same, 404 not found. I even stripped out everything and only have the import {Http} from 'angular2/http' and still get not found. Must be something wrong with the libraries? As soon as the import for http is present, regardless of file I get the 404 error.

Brocco Over a year ago

Ah I see, you are having a much different issue. This seems like a bundling issue or reference issue, you will need to post your build/deploy information. I would even suggest asking that in a different question. That being said, you will still need to set up Http as a provider once you get the build/deploy set up

noshitsherlock Over a year ago

Ok, sorry maybe my question was not clear enough :) I just followed this, tutorialedge.net/getting-started-with-angular-2 only installed liveserver and typescript tsc via npm, nothing else.

|

Collectives™ on Stack Overflow

Angular2 http service not found

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related