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:

https://i.sstatic.net/MUOGa.png

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

Discovering if the array data is already present in Angular can be accomplished by using specific methods

Here is the snippet of code: data = [ { 'id': 'asdjxv', 'username': 'emma', }, { 'id': 'asqweja', 'username': 'adam', }, { ...

javascriptangulartypescript

Having trouble grasping the concept of Interfaces and dealing with FormGroup problems in Angular?

Apologies if my question is a duplicate, I have found several solutions for the same issue on Stack Overflow, but unfortunately, I struggle to understand them in technical terms. Problem 1 src/app/models/dataModel.ts:2:5 2 id: number; ~~ The exp ...

angulartypescriptangular-forms

How to integrate a chips feature in Angular 4 using Typescript

Struggling to incorporate a chips component into my Angular web application, which comprises Typescript, HTML, and CSS files. After grappling with this for weeks without success, I have yet to find the right solution. To review my current code, you can a ...

htmlcssangulartypescript

Using TypeScript to specify a limited set of required fields

Can a custom type constraint be created to ensure that a type includes certain non-optional keys from an object, but not all keys? For instance: class Bar { key1: number key2: Object key3: <another type> } const Y = { key1: 'foo' ...

typescript

Getting a count value from the server and converting it into JSON format on an Android device

Seeking assistance with retrieving the number of rows from a server table using JSON parsing and PHP in an Android project. The PHP code shown below successfully fetches the value, but I am unsure about how to proceed with parsing the JSON data. Any guidan ...

phpandroidjson

Parsing JSON using dotted paths in Python

Are there any Python libraries available on PyPI that allow me to parse JSON using dot-separated paths and order-independent arrays? 1. dot separated path 2. order independant in case of array Data : "attr1": [ { "attr2": "val2" }, ...

pythonarraysjsonparsingpypi

What is the process for including an optional ngModelGroup in Angular forms?

I'm encountering an issue with incorporating the optional ngModelGroup in angular forms. Although I am familiar with how to use ngModelGroup in angular forms, I am struggling to figure out a way to make it optional. I have attempted to pass false, nu ...

javascriptangularangular-forms

struggling to access the value of [(ngModel)] within Angular 6 component

When working in an HTML file, I am using ngModel to retrieve a value that I want to utilize in my component. edit-customer.component.html <input id="userInfoEmail" type="text" class="form-control" value="{{userInfo.email}}" [(ngModel)]="userInfo.email ...

angulartypescriptangular6primengangular-ngmodel

Display a list of records retrieved from a Firebase query using ngFor to iterate through each instance

I'm currently using firebase and angular to work on a billing list project. The list contains data showing information for a specific month, you can refer to the imagehttps://i.stack.imgur.com/ZR4BE.png While querying the list was smooth, I encounte ...

javascriptangularfirebase

Having trouble with Angular 2's Output/emit() function not functioning properly

Struggling to understand why I am unable to send or receive some data. The toggleNavigation() function is triggering, but unsure if the .emit() method is actually functioning as intended. My end goal is to collapse and expand the navigation menu, but for ...

javascriptangulartypescriptangular2-directives

Transform the razor model into JSON format and then integrate it with Angular

Currently, I am attempting to integrate AngularJs with MVC5. However, the challenge I am facing is extracting data from the razor @model using AngularJs. After several unsuccessful attempts at converting the @Model to JSON, I am still stuck. _Layout.csht ...

c#asp.net-mvcjsonangularjsrazor

Loading JSON data from a file in an AngularJS service

Looking to retrieve JSON data from a file named driverStandings.json, which can be found in the structure from the provided image. I am utilizing a service API to fetch this information by using the code displayed below (refer to image). After compiling, ...

javascriptjsonangularjsservice

Structured similar to a map with typed elements

As a beginner in Typescript, I am delving into creating a typed map structure where the values are associated with specific keys. This can be demonstrated through pseudo JS code without types: const propertyA = "PropertyA"; const propertyB = "PropertyB"; ...

typescript

The JSON Deserialization method returned a value of 0

Greetings! I'm facing some challenges in C# (Xamarin) after following various tutorials on parsing. My main focus is on extracting the value only. Does anyone have any insights on how to resolve this issue? Below is a snippet of my JSON data: { &q ...

c#jsonxamarin

Ordering JSON Data chronologically

Hey there! I've been working on fetching data from a JSON file online and attempting to sort it by date in descending order. Previously, I successfully achieved this using an XML parser with an RSS feed. However, the same approach doesn't seem to ...

objective-cjsonsortingdate

Update each number in an array by appending a string within a table in an Angular component, rather than the

I have created a function that decides on a comment based on the result number added to an array and displays it in a table. However, calling this function within the template is causing a performance slowdown. Is there a way to achieve the same outcome w ...

javascriptangulartypescript

Exporting key/value objects with React components as values in Typescript

I have a .tsx file where I need to export an object containing key/value pairs. Each value is going to be a React component used in another file. While I will have multiple key/value pairs, I'm focusing on just one at the moment. object.tsx import { ...

reactjstypescriptnext.js

Issues with using hooks in a remote module in Webpack 5 module federation

I am attempting to create a dynamic system at runtime using Module Federation, a feature in webpack 5. Everything seems to be working well, but I encounter a multitude of 'invalid rule of hooks' errors when I add hooks to the 'producer' ...

javascriptreactjstypescriptwebpack

The TypeScript error "File 'XXX' is not recognized as a module" is preventing successful compilation

Is there a way to import a module from an external file into another TS file? Even after following the steps, when I tried to do so in VSCode, it gave me an error saying that the file 'XXX' is not a module: Here's the error I encountered I ...

jsonangulartypescriptmodulevisual-studio-code

Steps to retrieve retrofit response individually upon button click for display in activity

I am currently working on a quiz application where I retrieve questions, options, and correct answers using the RETROFIT library. The app consists of multiple questions that I need to display in my QuizActivity. In this activity, users can navigate through ...

javaandroidjsonretrofitretrofit2