角2：ローカルの.jsonファイルにファイルが見つかりません

Question

ローカルファイルを見つけられず、画像ファイルであろうとデータファイルであろうと、それらを開くことができないといういくつかの記事を見ましたが、 。私の推測では、私は行方不明のいくつかの構成があるでしょう。

私が探しているファイルは、app.htmlとapp.tsファイルと同じレベルの "data"という名前のフォルダにあります。ここで

は、私がapp.htmlに持っているものであるPSは、私はまた、Ionic2使用しています：

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

をし、私が持っているapp.tsファイルに：

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

私が試しました：

./data/data.json 

data/data.json 

app/data/data.json 

と他のパス。そして、彼らはすべて、404ファイルが見つかりませんエラーを返します。これはAngular 2に慣れ親しむ痛みのように思えます。ありがとうございました

Answer 1

以前の回答では、wwwフォルダに直接入れてアプリに利用できるようになっています。新しく作成されたIonic2プロジェクトで.gitignoreを使用してwwwフォルダが除外されているので、これは最適な解決策ではないと言います。

代わりにsrc/assetsフォルダーに入れてください。また、アプリケーションでも使用できるようになり、デフォルトではgit repoから除外されません。 次にアクセスすることができます：this.http.get('assets/file.json');

あなたは.gitignoreファイルを変更できますが、他の不要なファイルを含めることができます。

Answer 2

あなたのサーバーはフォルダ '/ data'を見ることができますか？ JSONファイルがパブリック/静的ファイルと同じディレクトリにあることを確認してください。

Answer 3

私は、それがアプリケーションフォルダ内のすべてをコンパイルしてwww/buildフォルダに入れていることを理解していませんでした。したがって、コンパイルされていないアプリケーションフォルダにパスを入れると、私がパスを入れているファイルが、私が思うところではないことに気がつきませんでした。

私は2つのことをしました。私はファイルを直接wwwファイルに入れます（イオンチャネルを実行するたびにファイルがビルドファイルに置かれないようにしてください）。それに応じてパスを修正します。あるいは、あなたがapp.ts内のファイルを探すときに、最初にwww/buildから抜け出す必要があることを知ってパスを修正してください。

Answer 4

同じ問題を解決することに興味のある方は、 Angular CLIを使用していて、この場合は "data"フォルダのようにhttpでアクセス可能なフォルダにしたい場合。

角度-CLI.JSONに移動は、アプリの下の「データ」である「フォルダ名」を追加 - >資産

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