Fetch Data from an API using the HttpClient in Angular

i want to keep this JSON file (people.json) in different folder other then /assets/data. getting 404.

That depends on the setup. The one I'm using here uses the Angular CLI which by default exposes the assets/ folder when running the app. That folder is meant to keep static assets like images and other stuff the app needs to include. I regularly use it for "mock" data like the people.json in this example when you don't have a backend server at hand which serves you a real API.

I'd suggest to stick with the assets folder, but if you want to use a different one, you can totally configure it in the .angular-cli.json file: https://github.com/juristr/egghead-learn-http-in-angular/blob/fetch-data-from-api/.angular-cli.json#L10-L13

I want to return an Observable<Person> from the service file, how can I do this?

Please delete my comment above.