angular2 http conflict InMemoryWebApiModule

Question

First I wonder the URL is wrong, but turn out it is right. here is github api as my test url

I put it in chrome, it return desire result.

Second I wonder if my code is wrong

constructor(private fb: FormBuilder, private _userService: UserService, private _http:Http) {

        this._http
            .get('https://api.github.com/search/repositories?q=ng2&page=1&per_page=10')
            .map((res: Response) => res.json())
            .catch((res: Response) => {
              return Observable.of({items: [], totalCount: 0, error: res.json()});
            })
            .subscribe(d => {
                console.log(d);
            })
    }

this code always get this error message:

404 - Not Found Collection 'repositories' not found

But this URL can be accessed in my chrome.

and I can't find any wrong with my code.

I finally found why this happened.

Cause I add InMemoryWebApiModule into my module.

but I don't know what is root cause here

somebody could tell me?

Not answering your question, but I suggest you take a look at https://angular.io/docs/ts/latest/tutorial/toh-pt6.html First of all, move the http to service, your current build is not really good. Look at the tutorial, it tells you what you need on services & http. — AT82, Dec 23 '16 at 12:30
Look answer below @jeffery chan. It works for me, could you provide a plunker to reproduce problem, since for me it works on both chrome and firefox... — AT82, Dec 23 '16 at 12:38
can you provide your plunker? I am not familiar with plunker — jeffrey chan, Dec 23 '16 at 13:46
@jefferychan I didn't use plunker, I just added the method in a test project I have of Angular 2. Plunker has and template for making Angular 2 test app, so you can use that. Or did you already solve your problem? If my solution didn't work, your error has to be elsewhere, in other code you haven't posted, so me producing an plunker won't help you much, since I do not know the rest of your code... — AT82, Dec 23 '16 at 14:46
@jefferychan IF it does help, I created a plunker.... http://plnkr.co/edit/iBEshYOvNqqMShLm7ocQ — AT82, Dec 23 '16 at 14:58
thanks a lot. If you add InMemoryWebApiModule, will not work. — jeffrey chan, Dec 23 '16 at 15:03

score 1 · Accepted Answer · edited May 23 '17 at 12:32

**

EDIT: this answer was provided before there was a mention of InMemoryWebApiModule.

**

Do the http-request in your UserService:

export class UserService {

    constructor(private _http: Http) {  }

    getSomething() {
        return this._http.get('https://api.github.com/search/repositories?q=ng2&page=1&per_page=10')
         .map((res: Response) => res.json())
    }
}

And in your component I would suggest you put your method in ngOnInit rather than the constructor:

ngOnInit() {
    this._userService.getSomething()
      .subscribe(d => console.log(d);
}

Here is some info why: Difference between OnInit and Constructor

And remember to implement the OnInit in your class... export class YourClass implements OnInit

I really suggest you take a look at Tour Of Heroes - Http

EDIT! I checked, and with the changes I did to your code here in this post, work both in Chrome and Firefox! See below

And a working plunker here... Plunk

You don't got the point, it will return 404 errors. but it can access in chrome. — jeffrey chan, Dec 23 '16 at 12:22
@jeffreychan I edited my post, and as you can see it works on both browsers. — AT82, Dec 23 '16 at 12:53
hi I just do as you said, still get 404 errors. I will upload a pic about my code. — jeffrey chan, Dec 23 '16 at 13:42

angular2 http conflict InMemoryWebApiModule

1 Answers1

EDIT: this answer was provided before there was a mention of InMemoryWebApiModule.