Загрузка файла json из angular2 для определенного объекта вызвала ошибку 404

Я пытаюсь создать приложение с использованием Angular2, но у меня возникает проблема, когда я делаю запрос на получение по идентификатору для определенного продукта. Некоторые из файлов, связанных с моей проблемой, приведены ниже:

список продуктов.component.html

  <tbody>
                <tr *ngFor='let product of products | productFilter:listFilter'>
                    <td>
                        <img *ngIf='showImage && product.imageUrl'
                             [src]='product.imageUrl'
                             [title]='product.productName | uppercase'
                             [style.width.px]='imageWidth' 
                             [style.margin.px]='imageMargin'>
                    </td>
                    <td><a [routerLink]="['/product', product.id]">
                             // when I click over this in web browser the URL is "http://localhost:4200/product/1" which is exactly what I want 
                            //but I got the following error in console: GET http://localhost:4200/assets/product.json/1 404 (Not Found)
                        {{product.productName}}
                        </a>
                    </td>

Мой файл json выглядит следующим образом:

[ 
   {
    "id": 1,
    "productName": "Leaf Rake",
    "productCode": "GDN-0011",
    "releaseDate": "March 19, 2016",
    "description": "Leaf rake with 48-inch wooden handle.",
    "price": 19.95,
    "starRating": 3.2,
    "imageUrl": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png"
},
{
    "id": 2,
    "productName": "Garden Cart",
    "productCode": "GDN-0023",
    "releaseDate": "March 18, 2016",
    "description": "15 gallon capacity rolling garden cart",
    "price": 32.99,
    "starRating": 4.2,
    "imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
    },
    // other objects
 ]

Мой служебный файл показан ниже

  import { IProduct } from './product';

 @Injectable()
 export class ProductService {
private baseUrl = './assets/product.json';

constructor(private http: Http) { }

getProducts(): Observable<IProduct[]> {
    return this.http.get(this.baseUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('getProducts: ' + JSON.stringify(data)))
        .catch(this.handleError);
}


getProduct(id: number): Observable<IProduct> {
    if (id === 0) {
    //return Observable.of(this.initializeProduct());
 return Observable.create((observer: any) => {
        observer.next(this.initializeProduct());
         observer.complete();
     });
    };
    const url = `${this.baseUrl}/${id}`;
    return this.http.get(url)
        .map(this.extractData)
        .do(data => console.log('getProduct: ' + JSON.stringify(data)))
        .catch(this.handleError);
}

Когда я выполняю вызов getProducts(), у меня нет ошибки, и все продукты в формате Json загружаются правильно, но когда я делаю getProduct(id), я получаю указанную выше ошибку. .

Под вызовом getProducts() я подразумеваю строки кода ниже, которые находятся в моем product-list.component.ts.

 ngOnInit() : void {
    this._productService.getProducts()
    .subscribe(products => this.products=products,
                error => this.errorMessage = <any> error);
  console.log(this.products)
 } // this works perfectly

Под getProduct(id) я подразумеваю строки кода ниже

    ngOnInit(): void {
      this.sub = this.route.params.subscribe(
         params => {
            let id = +params['id'];
             this.getProduct(id);
     }); // this one is now working properly since I got a 404 error

Я не уверен, связана ли моя проблема с правильной загрузкой файла json, но я думаю, что, поскольку я могу получить все продукты, что-то не так с маршрутизацией или я что-то упускаю.

Я сталкиваюсь с этой проблемой в течение двух дней, и я не смог найти подходящее решение в Google, поэтому я решил обратиться за помощью. Спасибо заранее.