Angular 2: plik nie został znaleziony w lokalnym pliku .json

Question

Widziałem kilka różnych postów o tym, że nie mogę znaleźć plików lokalnych, aby je otworzyć, niezależnie od tego, czy są to obrazy czy pliki danych, ale żadne z rozwiązań nie zadziałało. . Zgaduję, że jest taka konfiguracja, której mi brakuje.

Plik, którego szukam, znajduje się w folderze o nazwie "dane" na tym samym poziomie, co moje pliki app.html i app.ts.

Oto co mam w app.html, PS Używam również Ionic2:

<ion-menu (click)='getDepartments()' side='right' type='overlay' [content]="content"> 

aw app.ts pliku mam:

getDepartments() { 
    this.http.get('/data/data.json') 
     .map(res => res.json()) 
     .subscribe(
      data => this.departments = data, 
      err => console.log(err), 
      () => console.log('Random Quote Complete') 
     ); 
} 

Próbowałam :

./data/data.json 

data/data.json 

app/data/data.json 

i dowolnej innej ścieżki. Wszystkie zwracają błąd 404 nie znaleziono pliku. Wydaje się to po prostu jak rosnące bóle z zaznajomieniem się z Angular 2. Z góry dziękuję

Answer 1

Poprzednie odpowiedzi powiedziały, że należy umieścić je bezpośrednio w folderze www, aby udostępnić aplikację. Powiedziałbym, że to nie jest najlepsze rozwiązanie, ponieważ folder www jest wykluczony przy użyciu .gitignore w nowo utworzonym projekcie Ionic2.

Zamiast tego umieść go w folderze src/assets, a będzie on również dostępny w aplikacji i NIE będzie wyłączony z repozytorium git (domyślnie). Następnie można uzyskać dostęp, używając: this.http.get('assets/file.json');

Można zmodyfikować plik .gitignore, ale może być dołączone inne niepotrzebne pliki.

Answer 2

Czy twój serwer może zobaczyć folder "/ data"? Upewnij się, że plik JSON znajduje się w tym samym katalogu, co pliki publiczne/statyczne.

Answer 3

Nie zdawałem sobie sprawy, że pracuję z Ionicem, który kompiluje wszystko w folderze aplikacji i umieszcza go w folderze www/build. Dlatego kiedy wstawiłem ścieżkę do nieskompilowanego folderu aplikacji, nie zdawałem sobie sprawy, że plik, w którym umieszczam ścieżkę, nie jest tam, gdzie myślę, że jest.

Zrobiłem dwie rzeczy, każda zadziałała. Pliki umieszczam bezpośrednio w pliku www (nie umieszczaj ich w pliku kompilacji, ponieważ będą usuwane za każdym razem, gdy uruchamiasz obsługę jonową), a następnie napraw odpowiednio ścieżkę. Lub po prostu napraw ścieżkę wiedząc, że gdy szukasz pliku w pliku app.ts, musisz najpierw wyjść z www/build.

Answer 4

Dla każdego, kto jest zainteresowany rozwiązaniem tego samego problemu. Jeśli korzystasz z Angular CLI i chcesz, aby każdy folder był dostępny za pośrednictwem http, jak w tym przypadku "folder" danych.

idź do skośnych CLI.JSON następnie dodać „nazwa folderu”, który jest „dane” w aplikacji -> aktywa

"apps": [ 
 
    { 
 
     "root": "src", 
 
     "outDir": "dist", 
 
     "assets": [ 
 
     "assets", 
 
     "favicon.ico", 
 
     "data" 
 
     ],