27

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?

peterh
  • 11,875
  • 18
  • 85
  • 108
Pinank Lakhani
  • 1,109
  • 2
  • 11
  • 31
  • 1
    An angular application runs in the browser of the user that connects to your web server. Your web server is (for example) a Linux machine, running behind a firewall in India, whereas the browser of the user is running on a Windows machine in Texas. There's no way the application running in Texas can access the file system of the Linux machine in India. Unless of course the web server in India allows downloading the file, using HTTP. So, to get short, web applications access files on web servers over the web, using the protocol of the web: HTTP. – JB Nizet Sep 28 '17 at 13:35
  • @JBNizet I guess the OP refers to his own machine. This wouldn't be possible for security reasons. – Estus Flask Sep 28 '17 at 13:48
  • You would have, as the webapp, to request this specific file from your server instead of accessing it by path. You can use `localStorage` or put that file in `src` as well. Angular is made to be a client side application so it doesnt know what's outside of itself. – Quentin Laillé Sep 28 '17 at 14:25
  • Thanks. So i can not access file that is outside of my angular application ? – Pinank Lakhani Sep 29 '17 at 05:12
  • This is not an Angular question. Do you have node or nginx? from where are you serving your site? Do you have other microservices? – so-random-dude Oct 04 '17 at 05:42
  • I'm having apache here and i'm taking about the base url here that is being used by the angular application. I want to keep the base of api url dynamic. It can be readable from one of file residing on server. – Pinank Lakhani Oct 04 '17 at 06:10
  • Can this be done for any file type ther than json – Anandhu Ajayakumar Feb 23 '18 at 12:18

2 Answers2

23

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.

Gokhan Kurt
  • 8,239
  • 1
  • 27
  • 51
  • What will be the ? And in "glob" key, shall i have to write my file name? And how can i use this defined path in my service file? – Pinank Lakhani Oct 10 '17 at 12:17
  • You define the and it maps to an url as I have shown. You write file name in glob. You can also use wildcard but I don't recommend since you are serving system files. What you mean by service file? If it is a typescript file, I have already told you. – Gokhan Kurt Oct 10 '17 at 13:47
  • I have to read that JSON file and use the data retried from that in my code. So i have set the file path in "tsconfig.json" as you described. I tried to access that url but still not able to access. How can i use this for reading system.json file? – Pinank Lakhani Oct 11 '17 at 06:53
  • @PinankLakhani Edited the typescript part of my answer. – Gokhan Kurt Oct 11 '17 at 07:17
  • @GökhanKurt Can you share a plunkr – Mukund Sonaiya Oct 11 '17 at 09:36
  • @MukundSonaiya It will not work in plnkr as it uses system.js. But you can see the path configuration in config.js. You have to adapt solution to your project anyways. https://plnkr.co/edit/aAwFzaJGOSBsxK5G3wWB?p=preview – Gokhan Kurt Oct 11 '17 at 10:07
  • @GökhanKurt I'm using angular-cli. I have an config file that is placed in the /etc folder of ubuntu. I want to get the base urls from this config file in angular4 app. How can this be done?the config file will be a json file – Pinank Lakhani Oct 11 '17 at 10:32
0

Another option might be using Electron.

Here's a tutorial: Angular 5 and Electron

Then you can build your app using angular and use the electron api to access files.

Electron basically just bundles your web app in a self contained nodejs environment you can run from linux/mac-os or windows as an application, with system access via an api like a regular application.

mauricio777
  • 1,296
  • 1
  • 15
  • 15