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

Pin*_*ani 21 typescript angular angular5

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

/etc/project/system.json

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

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

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

Gök*_*urt 16

正如其他人所说,您的问题只能通过您正在使用的服务器来解决.你想要的通常是命名,静态文件服务.您可以在Internet上找到有关服务器的静态文件服务的具体说明.

但是,您可能正在构建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>"
  }
]
Run Code Online (Sandbox Code Playgroud)

如果这样做,您可以使用URL访问该文件 http://yourdomain/<outputfolder>/system.json

如果您在打字稿代码中使用此json文件,则还可以设置typescript路径映射配置以查找此文件.Webpack和Angular-cli也支持这种配置.在您的tsconfig.json文件中:

"paths": {
  "system.json": [
    "/etc/project/system.json"
  ]
}
Run Code Online (Sandbox Code Playgroud)

然后你可以在typescript中导入json,如:

import * as data from 'system.json';
Run Code Online (Sandbox Code Playgroud)

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

declare module "*.json" {
    [key: string]: any;
}
Run Code Online (Sandbox Code Playgroud)

您可以在此处阅读有关打字稿路径解析的更多信息.