Angular 2 / Angular 4：如何从本地系统位置访问文件？答案

【问题标题】：Angular 2 / Angular 4 : How can I access file from the local system location?Angular 2 / Angular 4：如何从本地系统位置访问文件？
【发布时间】：2018-03-10 06:35:18
【问题描述】：

我在系统的以下位置有一个 JSON 文件：

/etc/project/system.json

我正在尝试使用我的系统路径访问此文件，但它不起作用。但是，如果我将此文件放在我的应用程序的 src 中，它工作正常。

JSON 文件路径是“/etc/project/system.json”，我的应用程序路径是“/var/www/DemoProject”

那么如何从本地系统访问文件？

【问题讨论】：

一个 Angular 应用程序在连接到您的 Web 服务器的用户的浏览器中运行。您的 Web 服务器是（例如）一台 Linux 机器，在印度的防火墙后面运行，而用户的浏览器在德克萨斯州的 Windows 机器上运行。在德州运行的应用程序无法访问印度 Linux 机器的文件系统。当然，除非印度的 Web 服务器允许使用 HTTP 下载文件。因此，简而言之，Web 应用程序使用 Web 协议通过 Web 访问 Web 服务器上的文件：HTTP。
@JBNizet 我猜 OP 指的是他自己的机器。出于安全原因，这是不可能的。
作为 web 应用程序，您将不得不从您的服务器请求此特定文件，而不是通过路径访问它。您也可以使用localStorage 或将该文件放入src。 Angular 被设计成一个客户端应用程序，因此它不知道自身之外是什么。
谢谢。所以我无法访问我的角度应用程序之外的文件？
这不是 Angular 问题。你有node还是nginx？您从哪里为您的网站提供服务？你还有其他微服务吗？

标签： angular typescript angular5

【解决方案1】：

正如其他人所说，您的问题只能由您使用的服务器解决。您想要的通常是命名的静态文件服务。您可以在 Internet 上找到为您的服务器提供静态文件的具体说明。

但是，您可能正在构建您的 Angular 应用程序。你甚至可能正在使用 Webpack。

如果您使用 Angular-cli 构建您的应用程序，您可以使用以下配置复制资产下的系统文件夹。如果您使用 Webpack，这也将在您每次请求时动态获取文件，而无需复制文件。阅读 webpack here。在您的.angular-cli.json 文件中：

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

如果你这样做，你可以使用 url http://yourdomain/<outputfolder>/system.json 访问文件

如果您在 typescript 代码中使用此 json 文件，您还可以设置 typescript 路径映射配置来查找此文件。 Webpack 和 Angular-cli 也支持这种配置。在您的tsconfig.json 文件中：

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

然后您可以在 typescript 中导入 json，例如：

import * as data from 'system.json';

您必须有此 json 文件的类型声明，因为 typescript 无法自行解析 json 文件的类型。你可以阅读它here。简而言之，将其放在项目根目录中的typings.d.ts 中：

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

你可以阅读更多关于打字稿路径解析here的信息。

【讨论】：

是什么？在“glob”键中，我必须写我的文件名吗？我怎样才能在我的服务文件中使用这个定义的路径？
您定义了并且它映射到一个 url，如我所示。您在 glob 中写入文件名。您也可以使用通配符，但我不建议您使用，因为您正在提供系统文件。服务文件是什么意思？如果是打字稿文件，我已经告诉过你了。
我必须读取该 JSON 文件并在我的代码中使用从中重试的数据。所以我已经按照你的描述在“tsconfig.json”中设置了文件路径。我试图访问该网址，但仍然无法访问。我如何使用它来读取 system.json 文件？
@PinankLakhani 编辑了我答案的打字稿部分。
@GökhanKurt 你能分享一下吗

【解决方案2】：

另一种选择可能是使用 Electron。

这里有一个教程：Angular 5 and Electron

然后您可以使用 Angular 构建您的应用程序并使用电子 API 访问文件。

Electron 基本上只是将您的 Web 应用程序捆绑在一个独立的 nodejs 环境中，您可以将其作为应用程序从 linux/mac-os 或 windows 运行，并像常规应用程序一样通过 api 进行系统访问。

【讨论】：