Angular 2: file non trovato sul file .json locale

Question

Ho visto alcuni post diversi sul non essere in grado di trovare file locali per aprirli sia che si tratti di immagini o file di dati, ma nessuna delle soluzioni ha funzionato per me . La mia ipotesi sarebbe che ci fosse qualche configurazione che mi manca.

Il file che sto cercando si trova in una cartella denominata "data" allo stesso livello dei file app.html e app.ts.

Ecco quello che ho in app.html, PS sto utilizzando anche Ionic2:

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

e nei file di app.ts ho:

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') 
     ); 
} 

ho provato :

./data/data.json 

data/data.json 

app/data/data.json 

e qualsiasi altro percorso. E tutti restituiscono un errore 404 file non trovato. Questo sembra proprio come i dolori della crescita con familiarizzare con Angular 2. Grazie in anticipo

Answer 1

Le risposte precedenti hanno detto di metterlo direttamente nella cartella www per renderlo disponibile all'app. Direi che questa non è la soluzione migliore in quanto la cartella www viene esclusa utilizzando .gitignore in un progetto Ionic2 appena creato.

Inseritelo invece nella cartella src/assets e verrà anche reso disponibile in App e NON verrà escluso dal repository git (per impostazione predefinita). Quindi è possibile accedere utilizzando: this.http.get('assets/file.json');

È possibile modificare il file .gitignore, ma potrebbe essere possibile includere altri file non necessari.

Answer 2

Il tuo server è in grado di vedere la cartella '/ data'? Assicurati che il tuo file JSON si trovi nella stessa directory dei tuoi file pubblici/statici.

Answer 3

Non mi sono reso conto che lavorando con Ionic, esso compila tutto nella cartella dell'app e lo inserisce nella cartella www/build. Quindi quando ho inserito un percorso nella cartella dell'app non compilata non mi sono reso conto che il file in cui sto inserendo il percorso non è dove penso che sia.

Quindi ho fatto due cose, ognuna funzionava. Inserisco i file direttamente nel file www (non li inserisco nel file di build poiché verranno eliminati ogni volta che si esegue ionic serve), quindi corregge il percorso di conseguenza. Oppure aggiusta il percorso sapendo che quando cerchi un file nella tua app.ts, deve uscire da www/build per primo.

Answer 4

Per chiunque sia interessato a risolvere lo stesso problema. Se si utilizza la CLI angolare e si desidera rendere qualsiasi cartella accessibile tramite http come in questo caso la cartella "dati".

Vai alla Angular-CLI.JSON quindi aggiungere "il nome della cartella", che è "dati" sotto apps -> beni

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