web-dev-qa-db-ja.com

Angular 2 / Angular 4：ローカルシステムの場所からファイルにアクセスするにはどうすればよいですか？

システムの次の場所にJSONファイルが1つあります

/etc/project/system.json

システムパスを使用してこのファイルにアクセスしようとしていますが、機能していません。ただし、このファイルをアプリケーションのsrc内に配置すると正常に機能します。

JSONファイルパスは「/etc/project/system.json」であり、私のアプリケーションパスは「/ var/www/DemoProject」です

ローカルシステムからどのようにファイルにアクセスできますか？.

angulartypescriptangular5
20
Pinank Lakhani

他の人が述べたように、問題は使用しているサーバーによってのみ解決できます。必要なのは、一般的に名前が付けられた静的ファイルサービスです。インターネットでサーバーに静的ファイルを提供するための具体的な手順を見つけることができます。

ただし、おそらく、ある時点でAngularアプリケーションを構築しています。Webpackを使用している可能性もあります。

Angular-cliを使用してアプリを構築している場合は、次の構成を使用して、アセットの下にシステムフォルダーをコピーできます。 Webpackを使用する場合、ファイルをコピーせずに、リクエストするたびにファイルを動的に取得します。 webpackについて読む こちら.angular-cli.jsonファイルで：

"assets": [
  "assets",            // These two are generally used in Angular projects
  "favicon.ico",       // ^^^^^^^^^
  {
    "glob": "system.json",
    "input": "/etc/project/",
    "output": "./<outputfolder>"
  }
]

これを行うと、http://yourdomain/<outputfolder>/system.jsonというURLでファイルにアクセスできます

TypeScriptコードでこのjsonファイルを使用している場合、TypeScriptパスマッピング構成を設定してこのファイルを見つけることもできます。 WebpackとAngular-cliもこの構成をサポートしています。 tsconfig.jsonファイルで：

"paths": {
  "system.json": [
    "/etc/project/system.json"
  ]
}

その後、次のようにjsonをTypeScriptにインポートできます。

import * as data from 'system.json';

TypeScriptはjsonファイルのタイプを単独で解決できないため、このjsonファイルのタイプ宣言が必要です。それについて読むことができます こちら 。要するに、これをプロジェクトルートのtypings.d.tsに配置します。

declare module "*.json" {
    [key: string]: any;
}

TypeScriptパス解決の詳細については、 こちら をご覧ください。

14
Gökhan Kurt

ブラウザで実行されているJSはローカルファイルにアクセスできません。参照： javascriptによるローカルファイルアクセス

ファイルにアクセスするには、ユーザーにファイルのアップロードを依頼する必要があります。 File Upload In Angular 2？

0
Viktor

別のオプションとして、Electronを使用することもできます。

ここにチュートリアルがあります： Angular 5 and Electron

次に、angularを使用してアプリをビルドし、electron apiを使用してファイルにアクセスします。

Electronは基本的に、アプリケーションをlinux/mac-osまたはwindowsから実行できる自己完結型nodejs環境にWebアプリをバンドルするだけで、通常のアプリケーションのようなAPI経由でシステムにアクセスできます。

0
mauricio777