Angular 2/Angular 4: Как я могу получить доступ к файлу из локального расположения системы?

У меня есть один файл JSON в следующем месте в моей системе

/etc/project/system.json

Я пытаюсь получить доступ к этому файлу, используя мой системный путь, но он не работает. Однако он отлично работает, если я помещаю этот файл внутри src в мое приложение.

Путь к файлу JSON - "/etc/project/system.json", а мой путь к приложению - "/var/www/DemoProject"

Итак, как я могу получить доступ к файлу из своей локальной системы.

Ответ 1

Как и другие, ваша проблема может быть решена только сервером, который вы используете. То, что вы хотите, обычно называется, статическим файловым сервисом. Вы можете найти конкретные инструкции для статического файла, обслуживающего ваш сервер в Интернете.

Однако вы, вероятно, создаете приложение 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>"
  }
]

Если вы сделаете это, вы можете получить доступ к файлу с URL http://yourdomain/<outputfolder>/system.json

Если вы используете этот json файл в своем коде typescript, вы также можете установить конфигурацию сопоставления пути typescript, чтобы найти этот файл. Webpack и Angular -cli также поддерживают эту конфигурацию. В файле tsconfig.json:

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

Затем вы можете импортировать json в typescript, например:

import * as data from 'system.json';

У вас должно быть объявление типа для этого json файла, поскольку typescript не может самостоятельно разрешать типы json файлов. Вы можете прочитать об этом здесь. Короче говоря, поместите это в typings.d.ts в свой корень проекта:

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

Подробнее о typescript разрешении пути здесь.

Ответ 2

JS, работающий в браузере, не может получить доступ к локальным файлам, см. Локальный доступ к файлам с помощью javascript

Вы должны попросить пользователя загрузить файл для доступа к нему, см. Загрузка файла Angular 2?

Ответ 3

Используйте запрос $http get для получения данных json файла.

$http.get('system.json').then(function(response){
    $scope.data = response;
})