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

Question

我的系统中有一个 JSON 文件：

/etc/project/system.json

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

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

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

Answer 1

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

但是，您可能会在某个时候构建 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"
  ]
}

然后您可以在打字稿中导入 json，例如：

import * as data from 'system.json';

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

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

您可以阅读更多关于 typescript 路径解析的内容 here。

Answer 2

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

这里有教程：Angular 5 and Electron

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

Electron 基本上只是将您的网络应用程序捆绑在一个自包含的 nodejs 环境中，您可以从 linux/mac-os 或 windows 运行作为应用程序，通过 [=22= 进行系统访问] 就像一个普通的应用程序。

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

Angular 2 / Angular 4 : How can I access file from the local system location?

typescript

angular

angular5