Angular 2 gives SystemJS cannot find /angular2/http module

Question

I have created a service for Angular 2:

import {Injectable} from "angular2/core";
import {Http} from "angular2/http";
import {TaskModel} from "./tasks.model"

@Injectable()
export class TasksDataService {

  tasks:Array<any>;

  constructor(http:Http) {

    this.tasks = [
      new TaskModel("Dishes"),
      new TaskModel("Cleaning the garage"),
      new TaskModel("Mow the grass")
    ];
  }

  getTasks():Array<any> {
    return this.tasks;
  }
}

When I run my program the browser shows:

system.src.js:1049 GET http://localhost:3000/angular2/http.js 404 (Not Found)

I have looked up tutorials and they include angular2/http the same way. Does anyone see what is going wrong?

Thierry Templier · Accepted Answer · 2016-01-12T16:26:52.883

35

You need to check that you include the http.dev.js file in your main HTML file:

<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/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

You need then to add the HTTP_PROVIDERS as second parameter of the bootstrap function:

import { HTTP_PROVIDERS } from 'angular2/http';

bootstrap(MyMainComponent, [ HTTP_PROVIDERS ]);

Hope it helps you, Thierry

edited Jan 12 '16 at 16:26

answered Jan 12 '16 at 16:02

Thierry Templier

198,364
44
396
360

Thanks! But this triggered another error: angular.js:12477 Error: No provider for Http! (Tasks -> TasksDataService -> Http). I read about including it as a provider for a component, but this one is just a class. Any clues? – Bas van Dijk Jan 12 '16 at 16:21
You need to add HTTP_PROVIDERS as second parameters of your bootstrap function ;-) – Thierry Templier Jan 12 '16 at 16:23
I have read that. But this is a Angular 1 hybrid app. So my bootstrap looks like: adapter.bootstrap(document.body, ["app"]); and adapter.bootstrap(document.body, ["app", HTTP_PROVIDERS]) did not work :) – Bas van Dijk Jan 12 '16 at 16:27
Perhaps try to put it within an array: [ 'app', [ HTTP_PROVIDERS ] ] – Thierry Templier Jan 12 '16 at 16:29
2

Great thought but didn't work. However I will create a new question for this issue – Bas van Dijk Jan 12 '16 at 16:33
Yes, you're right. Good idea. I will follow your question because I'm interested in the answer ;-) – Thierry Templier Jan 12 '16 at 16:55
This is the question: http://stackoverflow.com/questions/34749090/how-to-add-http-providers-to-an-upgradeprovider-bootstrap-in-angular-2 – Bas van Dijk Jan 12 '16 at 20:39
@ThierryTemplier, how would I do it using Angular 2 RC1 instead of Beta? Thank you very much! – Luis Gouveia Jul 20 '16 at 08:14
@LuisGouveia with RC versions, Angular2 modules (like HTTP) are configured within the SystemJS configuration. See this link https://angular.io/docs/ts/latest/quickstart.html (`systemjs.config.js` file). – Thierry Templier Jul 20 '16 at 08:21

Angular 2 gives SystemJS cannot find /angular2/http module

1 Answers1

Linked