When deploying my Angular project, I am unable to access my files

I have been facing challenges while trying to deploy my web application with the frontend being Angular. The issue I am encountering is that I cannot access my JSON file located in the assets folder.

Below is the function I am using to retrieve data from the JSON file:

getLanguage()
  {
    let language=localStorage.getItem('language')
    if (!language)
      language = 'english'
    return this.http.get('www/dist/assets/languages/'+language+'.json')
  }
}

The path of the file on my server is:

I have been attempting to access the JSON file on my server but have been unsuccessful. I am not sure if it is an issue with the URL or something else entirely. Can anyone provide guidance on resolving this issue?

jsonangulartypescriptdeploymentserve

Answer №1

According to the feedback provided on your query, you can try the following code snippet:

fetchData() {
    return this.http.get('assets/languages/'+language+'.json');
}

The folder path is relative to your application's folder (specifically the src folder during development).

Make sure that the assets folder is correctly configured in the angular.json file.

Within the "architect" and "build" section of your configuration, ensure you have something similar to this:

            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

Answer №2

attempt 

fetch the language data by using this syntax: return this.http.get('./assets/languages/'+language+'.json')

simply include ./ before accessing the language files with assets/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

extracting a particular value from a JSON object using JavaScript

How can I extract a specific value from my JSON file using Node.js? var request = require("request"); var options = { method: "GET", url: "URL of my database", headers: { "cache-control": "no-cache&qu ...

javascriptnode.jsjson

Is it time to refresh the sibling element when it's selected, or is there

I have recently started working with react and TypeScript, and I am facing some challenges. My current task involves modifying the functionality to display subscriptions and transactions on separate pages instead of together on the same page. I want to sh ...

javascriptreactjstypescript

Workbox automatically caches the lazy loaded bundles of Angular for improved performance

As I work on my Angular application and integrate Workbox Service Worker(SW) for PWA compatibility, I encounter an issue with my lazy-loaded bundles. While everything functions correctly in development mode due to SW being enabled only in production, the p ...

angularservice-workerworkbox

Using getters in a template can activate the Angular change detection cycle

When using getters inside templates, it seems that Angular's change detection can get stuck in a loop with the getter being called multiple times. Despite researching similar issues, I have not been able to find a clear solution. Background info: I ...

angulartypescriptloopsangular6angular-changedetection

The module is missing a declaration file and therefore has an implicit type of 'any'. This error (TS7016) occurs in TypeScript version 2.0

So I've been experimenting with the module react-image-gallery. Surprisingly, there seems to be no types available for this package when trying to install it using npm. When attempting npm install @types/react-image-gallery, all I get is a 404 error. ...

reactjstypescriptnpm

What are the best scenarios for implementing modules, components, or standalone components in Angular 17?

Apologies if this question has been posed before, but I'm still navigating my way through Angular and could use some guidance on when to utilize modules, components, or stand-alone components. For instance, if I am constructing a modest website consi ...

angulardeploymentng-modules

Contrast: Colon vs. Not Equal Sign (Typescript)

Introduction Hello everyone, I am new to Typescript and currently grappling with some fundamental concepts. When defining a parameter for a function, I typically specify the type like this: function example(test: string){...} However, as I delve deeper ...

javascriptreactjstypescript

What is the best way to save a Map for future use in different components?

Let's say I define an enum like this: export enum SomeEnum { SomeLongName = 1, AnotherName = 2 } Within my display components, I'm utilizing an enum map to translate the enum values into strings for presentation on the web app: enumMap = new Map ...

angulartypescript

Is there a way for me to store the current router in a state for later use

I am currently working on implementing conditional styling with 2 different headers. My goal is to save the current router page into a state. Here's my code snippet: const [page, setPage] = useState("black"); const data = { page, setPage, ...

reactjstypescriptnext.js

Issue with Angular 6 Material2 mat-table MatRipple causing errors

When I try to use MatTable with a data source in Angular 6 and add sorting or pagination, I encounter the following error: ERROR Error: Uncaught (in promise): Error: Can't resolve all parameters for MatRipple: ([object Object], [object Object], [ob ...

angularangular-material2angular6

Typescript is throwing a Mongoose error stating that the Schema has not been registered for the model

I've dedicated a lot of time to researching online, but I can't seem to figure out what's missing in this case. Any help would be greatly appreciated! Permission.ts (This is the Permission model file. It has references with the Module model ...

javascripttypescriptmongodbmongoose

Tips for creating a sophisticated state transition diagram using Typescript

If you have a creative idea for a new title, feel free to make changes! I have two enums set up like this: enum State { A = "A", B = "B", C = "C" } enum Event { X = "X", Y = "Y", Z ...

javascripttypescript

Is there a way to selectively add elements to the Promise.all() array based on certain conditions?

Here is the code snippet that I have written: I am aware that using the 'await' keyword inside a for-loop is not recommended. const booksNotBackedUp: number[] = []; for (let i = 0; i < usersBooks.length; i += 1) { const files = await ...

javascripttypescriptasync-awaitpromise

Saving JavaScript Object Notation (JSON) information from Node.js into MongoDB

Currently, I am successfully pulling weather data in JSON format from Wundground using their API. The next step for me is to store this data in MongoDB for future use. After retrieving the data and attempting to write it to a Mongo collection, I encountere ...

javascriptjsonnode.jsmongodb

Exploring how to access and read the request body within Angular2

I'm managing a launcher platform for launching various Angular2 applications that I have ownership of, potentially across different domains. I am looking to send configuration details through the request body. Is there a way to send a POST request to ...

postangularangular2-routing

Transform the URL to retrieve JSON information

I'm facing an issue while fetching JSON data from a remote server. Everything works smoothly until I pass a two-character string, which causes my app to force stop. How can I encode the URL to avoid this error? Below is the code snippet where I attem ...

androidjson

A guide on including a class to a DOM element in Angular 6 without relying on Jquery

Currently, I have created a component template using Bootstrap that looks like this: <div class="container"> <div class="row my-4"> <div class="col-md-12 d-flex justify-content-center"> <h2> ...

javascriptjqueryangulartypescriptangularjs-directive

Utilize jq to extract data from json output

Thank you for your continued support. I am facing an issue with converting a JSON output into CSV format. While I have managed to generate some output, it does not align with the desired outcome. Curl Command Output { "results": [{ "name ...

jsonexport-to-csvjq

Create a nested struct definition in Golang and ensure it contains identical objects

Here is a struct that I am working with: type AutoGenerated struct { Accounting []struct { FirstName string `json:"firstName"` LastName string `json:"lastName"` Age int `json:"age"` } `json:"accounting"` Sales []struct { FirstName string ...

jsongostruct

Is there a way I can retrieve the count of questions bearing a specific tag that have been posted today and within the current week?

My goal is to retrieve the daily and weekly count of questions associated with a specific tag. For instance, I am interested in obtaining the daily and weekly counts for the top 100 languages or tags: https://i.stack.imgur.com/J7l7b.png I managed to loc ...

jsonapistackexchange-api