title: In Component service.ts url: "http://localhost:4200/data/products.json" not found
body: <p>I am getting a 404 not found error on this line of code "return this.http.get('../data/products.json');"</p>
  
  <p>where the path is "src\app\shared\services\product.service.ts" for the service.ts file. The path of the json file is "src\data\products.json"</p>
  
  <p>This is the service.ts code:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  export interface Product {
    id: number;
    title: string;
    price: number;
    imageUrl: string;
    description: string;
  }
  
  @Injectable()
  export class ProductService {
    constructor(private http: HttpClient) {}
  
    getAll(): Observable&lt;Product[]&gt; {
      return this.http.get&lt;Product[]&gt;('../data/products.json');
    }
  
    getById(productId: number): Observable&lt;Product&gt; {
      return this.http.get&lt;Product[]&gt;('../data/products.json')
        .pipe(
          map(products =&gt; &lt;Product&gt;products.find(p =&gt; p.id === productId))
        );
    }
  }
  </code></pre>