Angular read local json file

Question

I try to read a local json file in my assets folder -> json - accueil.json but angular can't find it and returns the following error: message: "Http failure response for http://localhost:4200/assets/json/acceuil.json: 404 Not Found"

service

export class HomeService {

  private api = '/assets/json/acceuil.json'

  constructor(private http:HttpClient) { }

  getAll(): Observable<Ipost[]> {
    return this.http.get<Ipost[]>(this.api);
  }
}

ts.file

export class HomepageComponent implements OnInit, OnDestroy {

  postArray: Ipost[] = [];
  private sub: Subscription = new Subscription;

  constructor(
    private homeService: HomeService,
    private router: Router) { }


  ngOnInit(): void {
    this.getAllNations();
  }

  getAllNations() {
    let resp = this.homeService.getAll();
    this.sub = resp.subscribe((result: Ipost[])=> {
      this.postArray = result;
    });
  }

  goToMenu(post: Ipost) {
    this.router.navigate(['/menu']);
    console.log(post.id);
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }

}

html

<div class="col-1 px-0" *ngFor="let post of postArray">
          <div *ngIf="post.id <= 12" (click)="goToMenu(post)">
            <img src="/assets/flags/{{ post.bigramme }}.jpg" alt="flag" style="width: 23px;">
            <span style="font-size: 12px; padding-left: 2px;">{{post.libelle}}</span>
          </div>
        </div>

json

{
  "drapeaux": [
    {
      "id": 1,
      "mnemo": "KHM",
      "libelle": "Cambodge",
      "bigramme": "KH"
    },
  ]
}

interface

export interface Ipost {

  id:number,
  mnemo:string,
  libelle:string,
  bigramme:string
}

Answer 1

I try to read a local json file in my assets folder -> json - accueil.json but angular can't find it and returns the following error: message: "Http failure response for http://localhost:4200/assets/json/acceuil.json: 404 Not Found"

service

export class HomeService {

  private api = '/assets/json/acceuil.json'

  constructor(private http:HttpClient) { }

  getAll(): Observable<Ipost[]> {
    return this.http.get<Ipost[]>(this.api);
  }
}

ts.file

export class HomepageComponent implements OnInit, OnDestroy {

  postArray: Ipost[] = [];
  private sub: Subscription = new Subscription;

  constructor(
    private homeService: HomeService,
    private router: Router) { }


  ngOnInit(): void {
    this.getAllNations();
  }

  getAllNations() {
    let resp = this.homeService.getAll();
    this.sub = resp.subscribe((result: Ipost[])=> {
      this.postArray = result;
    });
  }

  goToMenu(post: Ipost) {
    this.router.navigate(['/menu']);
    console.log(post.id);
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }

}

html

<div class="col-1 px-0" *ngFor="let post of postArray">
          <div *ngIf="post.id <= 12" (click)="goToMenu(post)">
            <img src="/assets/flags/{{ post.bigramme }}.jpg" alt="flag" style="width: 23px;">
            <span style="font-size: 12px; padding-left: 2px;">{{post.libelle}}</span>
          </div>
        </div>

json

{
  "drapeaux": [
    {
      "id": 1,
      "mnemo": "KHM",
      "libelle": "Cambodge",
      "bigramme": "KH"
    },
  ]
}

interface

export interface Ipost {

  id:number,
  mnemo:string,
  libelle:string,
  bigramme:string
}