web-dev-qa-db-fra.com

Angular 2/Angular 4: Comment puis-je accéder à un fichier à partir de l'emplacement du système local?

J'ai un fichier JSON à l'emplacement suivant sur mon système

/etc/project/system.json

J'essaie d'accéder à ce fichier en utilisant mon chemin d'accès système, mais cela ne fonctionne pas. Cependant, cela fonctionne bien si je mets ce fichier dans src dans mon application. 

Le chemin du fichier JSON est "/etc/project/system.json" et mon chemin d’application est "/ var/www/DemoProject"

Alors, comment puis-je accéder aux fichiers de mon système local.

angulartypescriptangular5
19
Pinank Lakhani

Comme d'autres l'ont indiqué, votre problème ne peut être résolu que par le serveur que vous utilisez. Ce que vous voulez, c’est généralement nommé, le service de fichiers statiques. Vous pouvez trouver des instructions spécifiques pour la distribution de fichiers statiques sur votre serveur sur Internet.

Cependant, vous construisez probablement votre application angulaire à un moment donné. Vous pourriez même utiliser Webpack.

Si vous utilisez Angular-cli pour créer votre application, vous pouvez utiliser la configuration suivante pour copier le dossier système sous vos actifs. Si vous utilisez Webpack, le fichier sera également récupéré de manière dynamique à chaque demande, sans copier le fichier. Lisez à propos de webpack ici . Dans votre fichier .angular-cli.json:

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

Si vous faites cela, vous pouvez accéder au fichier avec l’URL http://yourdomain/<outputfolder>/system.json

Si vous utilisez ce fichier json dans votre code TypeScript, vous pouvez également définir une configuration de mappage de chemin d'accès TypeScript pour rechercher ce fichier. Webpack et Angular-cli prennent également en charge cette configuration. Dans votre fichier tsconfig.json:

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

Ensuite, vous pouvez importer le JSON dans TypeScript comme suit:

import * as data from 'system.json';

Vous devez avoir une déclaration de type pour ce fichier json car TypeScript ne peut pas résoudre les types de fichiers json par lui-même. Vous pouvez lire à ce sujet ici . En bref, mettez ceci dans typings.d.ts à la racine de votre projet:

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

Vous pouvez en savoir plus sur la résolution de chemins TypeScript here .

13
Gökhan Kurt

JS exécuté dans le navigateur ne peut pas accéder aux fichiers locaux, voir: Accès aux fichiers locaux avec javascript

Vous devez demander à l'utilisateur de télécharger un fichier pour y accéder, voir: File Upload In Angular 2?

0
Viktor

Une autre option pourrait utiliser Electron.

Voici un tutoriel: Angular 5 and Electron

Ensuite, vous pouvez créer votre application en utilisant angular et utiliser l’API électronique pour accéder aux fichiers. 

En règle générale, Electron regroupe votre application Web dans un environnement nodejs autonome que vous pouvez exécuter à partir de Linux/Mac-OS ou de Windows en tant qu'application, avec un accès système via une API comme une application classique.

0
mauricio777