web-dev-qa-db-ja.com

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

ローカルファイルが見つからないために開くことができず、画像ファイルであろうとデータファイルであろうといくつかの異なる投稿を見てきましたが、どの解決策もうまくいきませんでした。私が推測しているのは、欠落している構成があることです。

私が探しているファイルは、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 file not foundエラーを返します。これは、Angular 2。

javascripthtmlfileangularionic2
9
discodane

以前の回答では、これをwwwフォルダーに直接配置して、アプリで使用できるようにすることを述べていました。新しく作成されたIonic2プロジェクトで_.gitignore_を使用してwwwフォルダーが除外されているため、これは最善の解決策ではないと思います。

代わりに、それを_src/assets_フォルダー内に配置すると、アプリでも使用できるようになり、（デフォルトでは）gitリポジトリから除外されません。その後、次を使用してアクセスできます：this.http.get('assets/file.json');

.gitignoreファイルを変更できますが、他の不要なファイルを含める可能性があります。

22
Gabe O'Leary

同じ問題の解決に興味がある人なら誰でも。 Angular CLIを使用していて、この場合は "data"フォルダーのように、http経由で任意のフォルダーにアクセスできるようにする場合。

Angular-CLI.JSONに移動し、アプリの下に「データ」である「フォルダー名」を追加します->アセット

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

Ionicで作業すると、appフォルダー内のすべてがコンパイルされ、www/buildフォルダーに配置されることに気づきませんでした。そのため、コンパイルされていないappフォルダーにパスを配置すると、私がパスを入れているファイルが、私が思っている場所ではないことを理解してください。

だから私は2つのことをしました、それぞれがうまくいきました。ファイルをwwwファイルに直接配置します（ionic serve）を実行するたびに削除されるため、ビルドファイルには配置しないでください。その後、それに応じてパスを修正します。または単にapp.tsでファイルを探すとき、最初にwww/buildを終了する必要があることを認識して、パスを修正します。

2
discodane