Angular 组件服务中的url:“http://localhost:4200/data/products.json“没有找到

Angular 组件服务中的url:“http://localhost:4200/data/products.json“没有找到,angular,angular-http,angular-httpclient,Angular,Angular Http,Angular Httpclient,我在这行代码中得到一个404NotFound错误,返回this.http.get'../data/products.json' 其中,service.ts文件的路径为src\app\shared\services\product.service.ts。json文件的路径是src\data\products.json 这是service.ts代码: import { Injectable } from '@angular/core'; import { HttpClient } from '@an

我在这行代码中得到一个404NotFound错误,返回this.http.get'../data/products.json'

其中,service.ts文件的路径为src\app\shared\services\product.service.ts。json文件的路径是src\data\products.json

这是service.ts代码:

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<Product[]> {
    return this.http.get<Product[]>('../data/products.json');
  }

  getById(productId: number): Observable<Product> {
    return this.http.get<Product[]>('../data/products.json')
      .pipe(
        map(products => <Product>products.find(p => p.id === productId))
      );
  }
}

尝试将json文件夹放在资产文件夹下,如下所示:

src\assets\mock\products.json
然后修改方法中的路径:

getAll(): Observable<Product[]> {
    return this.http.get<Product[]>('assets/mock/products.json')
}