CODEWITHSUNDEEP
angularasp.net-core-1.0
Mohammad Ghanem
Mohammad Ghanem

Reputation: 726

Angular2 Http module generates 404 not found error

I'm using Angular2 beta 17 (last version) with ASP.NET core 1 MVC application , i'm trying to use http as the following :

import {Http} from 'Angular2/http';
import "rxjs/add/operator/map"
import { Injectable } from 'angular2/core';
@Injectable()
export class PostsService
{
    constructor(private _http: Http) {
    }
    getPosts()
    {
       return this._http.get("http://jsonplaceholder.typicode.com/posts")
            .map(res => res.json());
    }}

After using the service inside component i got error in chrome : Failed to load resource: the server responded with a status of 404 (Not Found). chrome error details.

Component calling the service as the following :

import {Component} from 'angular2/core';
import {PostsService} from '../services/posts.service'
import {HTTP_PROVIDERS} from 'angular2/http';


@Component({
    selector: 'post-list',
    template:
    `


`,
    providers: [PostsService, HTTP_PROVIDERS]

})
export class PostsComponent
{
    constructor( private _postsService: PostsService)
    {
        this._postsService.getPosts().subscribe(posts => console.log(posts));
    }
}

Note that All js imported in index.html as the following :

<section id="content">
    <div class="container">
        <div class="row">
            <my-app>
                <div class="alert alert-info" role="alert">
                    <h3>Loading...</h3>
                </div>
            </my-app>
        </div>
    </div>
</section>

@section Scripts {
    <script>
        System.config({
            packages: {
                'app': { defaultExtension: 'js' },
                'lib': { defaultExtension: 'js' },
            },
        });

        System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>


}

Upvotes: 1

Views: 553

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202296

With Angular2 beta versions, you need to include the http.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/http.dev.js"></script> <-----

With RC versions, things changed since now you need to configure Angular2 modules (included the HTTP one) with your SystemJS configuration

Upvotes: 1

Related Questions