Angular 8: Http parsing error, missing 'data.service.ts' file?

1

Hello,
Disclaimer: I was not able to use links so had to doctor the URLs a little to post this question.

I found this Angular tutorial from the news page of freecodecamp[dot]org:
How to build an Angular 8 app from scratch in 11 easy steps
freecodecamp[dot]org/news/angular-8-tutorial-in-easy-steps–

It uses ‘Faker.js’ as a mock REST API to generate date with localhost:3000.

I was interesting in doing it to try and get a little more familiar with using APIs, which I haven’t really done before. I have gotten to step 8 and am having issues with getting the mock data to display. Instead, the app serves without issue and all I get is a perpetual loading spinner. I opened dev tools to check the console and got the following error message:

ERROR
Object { headers: {…}, status: 200, statusText: “OK”, url: “http//localhost.3000/”, ok: false, name: “HttpErrorResponse”, message: “Http failure during parsing for http//localhost:3000/”, error: {…} }

I’m thinking the issue is something the prevents the mock data from either being parsed correctly or displayed after it is parsed. Still new to Angular and coding so not really sure where to look from here.

While reading over the project, I saw that step 10 refers to a ‘data.service.ts’ file but I’m not seeing this file in my current project and am not seeing its creation mentioned in previous steps. I wanted to check if I overlooked something/missed a step where this would have been generated or if I just need to create the file manually.

I am using Angular CLI 8.3.26

I can post additional information upon request. Github repo can be found here:
https[colon]//github[dot]com/DDufner/angular-mock-api

Thank you in advance.

2

Hello!

Your repository it’s empty :stuck_out_tongue: (not really empty, but it lacks your source code)… did you forget to push the changes to the server :slight_smile: (happens to everyone)?

In the meantime, are you absolutely sure that you followed the 7th step to the letter?

  • Is the API running? In other words, did you run the command npm run server?
  • Did you create the file database.json?
  • Did you create the file generate.js and run the command? This script should create add the actual data to database.json.

By the way, you have to run Angular app and the server at the same time (open two consoles/shell/terminal/cmd/powershell, for instance).

It would be helpful to have more information, like the error logs from the API (if any)… until then,

Regards :slight_smile:!

3

thanks for the heads up on my repo not pushing correctly to github! fixed that so hopefully that will help.

the generate.js looks like it worked as the database.json file is populated with info.

i used the duel CLI method to have the API running on one and the app being served on the other. the API CLI window shows the following status:

GET /db 200 4.370 ms - -
GET /__rules 404 4.633 ms - 2

i also check the network response with dev tools and there is an GET request for http//localhost:4200/favicon.ico that is returning a 404 with the response Cannot GET /favicon.ico

the only place i can find favicon.ico in the project is a couple times in the angular.json file and in the index.html file but not sure what to do with that info.

4

I checked your code and the server (the test API) is working fine, the problem is within your api.service.ts.

If you want to learn more, try to solve the problem by yourself, but to put you on the right track, review the expected URL the API is supposed to serve (check the tutorial and compare the API used on it with the one you wrote).

In case you’ve tried without success, I’ll leave the solution below:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  // Here was the error:
  private SERVER_URL = "http://localhost:3000/products";

  constructor(private httpClient: HttpClient) { }

        public get(){
    return this.httpClient.get(this.SERVER_URL);
  }
}

Whenever you find a 404 error on the favicon, don’t worry! It’s not essential. The favicon is that little icon that appears alongside the page title on the browser tabs; it’s also the icon used on the bookmarks of the browser. More information about the favicon can be found on Wikipedia.

That’s all!

Happy coding!

5

One last thing, whenever you reply to someone, be sure to either cite (like this @skaparate) that person or reply (clicking on the reply button) to the previous comment/response, otherwise the other person may not be notified of your response and you may have to wait longer (I saw there was a new response on this thread, but didn’t get notified).

6

@skaparate thanks for the help! i appreciate the hint instead of just outright telling me. i’ll look over it while coding this weekend and see if i can get it figured out.

1 Like
7

@skaparate wanted to update that i was able to get the page to work with the help of the hint you provided. i looked at the CLI output messages for the server window while running it and saw that i needed to change the URL to the resources page it mentioned. thank you again!

1 Like