Angular 2/Angular 4:如何从本地系统位置访问文件? [英] Angular 2 / Angular 4 : How can I access file from the local system location?

问题描述

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

/etc/project/system.json

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

JSON 文件路径为/etc/project/system.json"；我的应用程序路径是/var/www/DemoProject"

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

解决方案

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

但是，您可能在某个时候构建了 Angular 应用程序.您甚至可能正在使用 Webpack.

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

资产":["assets",//这两个一般用在Angular项目中"favicon.ico",//^^^^^^^^^^{"glob": "system.json","input": "/etc/project/",输出":./<输出文件夹>"}]

如果您这样做，您可以使用 url http://yourdomain/<outputfolder>/system.json

访问该文件

如果你在你的打字稿代码中使用了这个json文件，你也可以设置打字稿路径映射配置来找到这个文件.Webpack 和 Angular-cli 也支持这种配置.在您的 tsconfig.json 文件中:

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

然后你可以像这样在打字稿中导入json:

import * as data from 'system.json';

您必须对此 json 文件进行类型声明，因为 typescript 无法自行解析 json 文件的类型.您可以在此处阅读相关内容.简而言之，将其放在项目根目录中的 typings.d.ts 中:

声明模块*.json"{[键:字符串]:任何；}

您可以在此处阅读更多关于 typescript 路径解析的信息.>

I have one JSON file at the following location in my system:

/etc/project/system.json

I'm trying to access this file using my system path but it's not working. However it's working fine if i put this file inside src in my application.

JSON File path is "/etc/project/system.json" and my application path is "/var/www/DemoProject"

So how can I access file from my local system?

解决方案

As others stated, your problem can only be solved by the server you are using. What you want is generally named, static file serving. You can find specific instructions for static file serving for your server in the internet.

However, you are probably building your Angular application at some point. You might even be using Webpack.

If you are using Angular-cli to build your app, you can use following configuration to copy the system folder under your assets. If you use Webpack, this will also dynamically fetch the file everytime you request, without copying the file. Read about webpack here. In your .angular-cli.json file:

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

If you do this, you can access the file with the url http://yourdomain/<outputfolder>/system.json

If you are using this json file in your typescript code, you can also set typescript path mapping configuration to find this file. Webpack and Angular-cli also supports this configuration. In your tsconfig.json file:

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

Then you can import the json in typescript like:

import * as data from 'system.json';

You must have type declaration for this json file as typescript can't resolve types of json files by itself. You can read about it here. In short, put this in typings.d.ts in your project root:

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

You can read more about typescript path resolving here.

这篇关于Angular 2/Angular 4:如何从本地系统位置访问文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！