Hi I am developing web application in Angular 5. I am trying to read json file using http call as below. I am getting 404 error. Below is my service.ts file. Json file also remains in same folder so path may be correct.
public GetNodes() {
return this.http.get('./json1.json');
}
Below is my component code.
ngOnInit() {
this.nodeservice.GetNodes().subscribe(data =>
console.log(data)
);
I have done one work around and found my static files supposed to be in assets folder. I moved my json1.json to assets folder and I tried to access. Still I am getting same 404 error. Below is the full path where my json file kept
Projectname\ClientApp\app\components\Utilities
I am using ./json1.json because my service and json files are in the same folder utilities.
Can someone help me to figure it out the issue? Any help would be appreciated. Thank you.
To access any asset data like image or file, you need to put them in assets folder and access it from there as angular loads all the public data from assets folder so any asset will not be accessible from component's folder.
For file './json1.json' the URL will be HOST_Name/json1.json and it won't be there so better to put all files in assets folder and provide path for assets folder.
You can also change assets configuration in "angular.json" to point to your component's folder to access that json file.
Related
I'm using ReactJS to build a site, and I want to create a link (a href="relativepath") to a local HTML file so that when the user clicks on the link, it'll open up the html page. The local file is in a different folder X outside of the project, and I don't want to upload it into my src folder because the html file depends on a lot of other files in X. Is there a good way to do so?
I also want to upload a different local HTML file that is already within the src folder of my React App. I currently have something like this:
import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)}
and it says in my terminal that
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <html>| | <head> >
I already tried adding in webpack + an htmlLoader, but I think I followed the steps incorrectly as I wasn't able to get it to work. I uninstalled those packages, so I'm now back to square one.
Thank you so much!
Just linking to or importing from a local file in some other location won't work unless those local files are also deployed to the server in the same location relative to the app (and the web server has access to that location).
So you'll need to copy the file and its linked dependencies in a folder that will be deployed along with your react build, but not where it'll get treated as part of the react codebase so webpack will try to compile it (so not in src either).
If you used create-react-app to set up your application, for example, this would be the public folder; other webpack setups may use different names but the general concept is the same.
I would like to put a download link on my website so the users can download the file template.csv. The file is static and is located at the root of my /grails-app/assets folder.
Inside my page.gsp, I have tried 2 methods do so, to no avail :
Download the template
this results in a template.csv file being downloaded, but the content is the html code of page.gsp rather than the original content of the file I uploaded in my assets.
Download the template
the generated html file has a link to localhost:8080/mysite/assets/template.csv but clicking it prompts an error message : Failed - no file.
What is the correct way to do what I want to achieve ? Is there an issue with extra permissions I would need to add to allow the download of my file ?
Our webapp relies on a rather old technological stack :
Grails 2.3.4
Plugin asset-pipeline-2.2.5
I have had some troubles with downloading files straight with a -tag.
To overcome this, I use Controller method to return the file and place the downloadable files in their own folder under web-app/:
class MyController {
#Autowired()
AssetResourceLocator assetResourceLocator
def downloadExcelTemplate () {
String fileName = "MyExcelFile.xlsx"
/* Note: these files are found in /web-app/downloadable directory */
Resource resource = assetResourceLocator.findResourceForURI("/downloadable/$fileName")
response.setHeader "Content-disposition", "attachment; filename=${resource.filename}"
response.contentType = 'application/vnd.ms-excel'
response.outputStream << resource.inputStream.bytes
}
}
And just use regular a-tag to to link to this controller method.
This way you also gain more control over file downloads.
I want to acccess data.json file in myservice.service.ts .
Can anyone suggest me how to achieve it?
Directory structure
myserivce.service.ts file
Getting error like this
Use URL like data.json and Put the data.json file in your src/ directory. It will work fine.
OR
Use URL like assets/data.json and Put the data.json file in your src/assets/ directory.
Two things.
The data.json file has to exist on the server hosting the web application.
The URL you provide $http is not relative to the service or component that is executing the request (or request chain). You have to specify the absolute url which would be
private _url = '/src/app/data.json';
Maybe the title is a bit strange, but I can't seem to find anything about on google.
Question: I have a folder that only contains .ts files and .json files.. Typescript compiles the .ts files and puts it into a separate directory (not as a bundle, just the directory structure 'as-is').
Src /
Workers /
[ModuleA.ts, ModuleA.json],
[ModuleB.ts, ModuleB.json],
[MobuleC.ts, ModuleC.json]
Most of the time I can just require('*.json') and the JSON file will be also placed in to build directory.
But now I have a situation, where importing the JSON will make no sense, because the JSON file gets updated every few seconds and I read the file with fs.readFile('*.json'), so I also don't want it floating around in the v8 cache (through require)
So how do I 'include' a JSON/None-Typescript file into the build, that is not explicitly being importing by either require or import?
For now I just used gulp to copy every .json file in the src folder over to the the respective dist/** folder.
But still find it strange typescript doesn't have something included for it..
Maybe you should checkout --resolveJsonModule, it's a newer feature of typescript.
I am trying to select files using input file type and then upload them to dropbox using the dropbox Core API or saving it to a local folder using Node.JS readFile and writeFile methods. The problem is that most of these methods require the file path and all I have is the name of the file that is stored in the File object array and for what I have read browsers do not allow to get the full path for security reasons. I don't know how to go about this, can anyone help me solve this? Thanks!!