All geek questions in one place

Angular2 http service not found

You cannot get a simple http service to work in angular2. For some reason, I just get 404. It does not contain any functions yet, but it seems to me that DI is not working.

As soon as I add TestService when the application loads, 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){ } }
+5
source share
3 answers

I just ran into this, fixed it by adding a script link to the http package:

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

I tried this, remembering that after implementing the routing, I added a similar resource. Hope this helps someone else!

+14
source

This is because by default your "http.dev.js" is not created

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; }) }
+2
source

You need to add Http by providing it as a provider. There are two ways to do this:

1) at the global level, which you can specify when downloading the application:

 bootstrap(AppComponent, [TestService, Http]);

2) inside the component that you are trying to use inside:

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

NOTE , you will also need to use import / require Http when it is shipped as a provider. This will allow angular DI to recognize what will be introduced.

0
source

Source: https://habr.com/ru/post/1240925/

More articles:


All Articles