Utilizing Angular application to access a JSON file located within the assets directory on Microsoft Azure platform

My angular 9 app currently has the ability to access a config.json file located in the assets folder. I have a config service that reads from this file, and everything works fine when running locally. The file path is /dist/assets/config.json.

However, when deploying the app on Azure as an Azure App Service (Windows OS), the app cannot find the config.json file, even though it's clearly present in the assets folder. Below is the relevant code snippet that shows the error message:

Error occurred while grabbing config files
config.service.ts:65 TypeError: You provided 'undefined' where a stream was expected. You can provide 
an Observable, Promise, Array, or Iterable.
at subscribeTo (subscribeTo.js:27)
at subscribeToResult (subscribeToResult.js:11)
at MergeMapSubscriber._innerSub (mergeMap.js:59)
at MergeMapSubscriber._tryNext (mergeMap.js:53)
at MergeMapSubscriber._next (mergeMap.js:36)
at MergeMapSubscriber.next (Subscriber.js:49)
at Observable._subscribe (subscribeToArray.js:3)
at Observable._trySubscribe (Observable.js:42)
at Observable.subscribe (Observable.js:28)
at MergeMapOperator.call (mergeMap.js:21)

appmodule.ts

 function configFactory(configService: ConfigService) {
    return () => configService.loadConfig();
 }     

 providers: [
{
  provide: APP_INITIALIZER,
  deps: [ConfigService],
  multi: true,
  useFactory: configFactory
},

ConfigService.ts

 loadConfig() {
    return this.http.get<Config>("assets/config.json").subscribe(x=>{
        console.log("Successfully grabbed config files");
        this.config=x;
    },error=>{
        console.log("Error in grabbing config files");
        console.log(error);
    });
}

web.config

<?xml version="1.0" encoding="UTF-8" ?>
<configuration>
 <system.webServer>
    <staticContent>
    <!-- this is so that app can find json file when deployed in azure -->
        <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
 </system.webServer>

angular.json

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

I have also looked at this resource Angular app unable to find asset files on Azure for a solution, but the suggested fix didn't work for my case. Additionally, I've set "allowSyntheticDefaultImports": true in my tsconfig.app.json file.

Answer №1

Running the command ng build --prod --base-href /unrc-willis-web/ will optimize your project for production.

Alternatively, you can also try using ng build --prod --base-href "./" to achieve the same result.

An issue was discovered with the interceptor function as it was being utilized unnecessarily for a specific call.

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

The comparison between 'MutableRefObject<string | null>' and 'string' will never be true, as they do not share any common types. Error code: TS2367

Struggling with a React and TypeScript issue I have stored the email and password in state variables const emailRef = useRef<string | null>(null); const passwordRef = useRef<string | null>(null); This is how I set them: const onEmailChange = ...

Performing an Angular 5 JSONP request using custom HttpHeaders

I'm attempting to make a JSONP request with specific HTTP header parameters. Using http.get makes it simple: let header = new HttpHeaders(); header.append(<header_param_name>, <header_param_value>); this.http.get(<my_url>, { header ...

I am working with an array called officeLocations, and I am looking to showcase it in an HTML format using the isOpened property in Angular

In my officeLocation.ts file, I have an array called officeLocationsArray structured like this: export class OfficeLocation { officeLocationName:string; Isopened:boolean; } export const officeLocationArray : OfficeLocation[] = [ {officeLocatio ...

Learn how to easily toggle table column text visibility with a simple click

I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...

unexpected JSON response

I am facing an issue with JSON requests. On a page, I have two separate requests - the first one functions correctly, but the second keeps throwing an unexpected token error that is puzzling to me. The first AJAX call: $.ajax({ type:'PO ...

Synchronizing Duplicate Instances of an Object in AngularJS

Imagine a scenario where our database consists of the following relationships: A Company, which can have multiple employees An Employee is employed by only one Company An Employee can also manage other employees ...and these entities in the database: ...

Is there a way to execute a function prior to the MatTabChange event?

Within my mat-tab-group, each tab contains its own component with a unique state. I utilize a hasChanges property to track if there are any pending changes in the component that need to be saved. I am currently facing the challenge of notifying the user w ...

Unraveling JSON stored in MySQL

I have stored a JSON string in my MySQL database with the following structure: { "string1": { "substring1": 1234 }, "string2": { "substring2": "substring2.1", "substring3": "substring3.1", "substring4": { ...

What are the advantages of incorporating JSON for retrieving data from MySQL?

So I have developed a website that retrieves data from a MySQL database using PHP, and then transforms it into JSON format for use with JavaScript. This process can be broken down into 5 steps: Query -> PDO Statement -> PHP Array -> JSON Strin ...

Execute ElasticSearch on a leading relational database

I'm curious about the compatibility of ElasticSearch with a relational database. 1. If I add or remove a record from the relational database, will it automatically update in ElasticSearch? 2. Will a document inserted into ElasticSearch also be saved ...

Tips for showing data from an hour ago in Angular

Here is the code snippet provided: data = [ { 'name' : 'sample' 'date' : '2020-02-18 13:50:01' }, { 'name' : 'sample' 'date' : '2020-02- ...

Revised: "Mastering the Art of using useLoaderData Properly with Remix V2

It seems that the correct way to type useLoaderData has changed since V2. export const loader = async () => { return json({ messages: [...] }) } // In component... const { messages } = useLoaderData<typeof loader> Prior examples show it type ...

The functionality of ShowMaskOnFocus feature is not functioning properly for input masks in Angular

I am currently utilizing the input-mask library and trying to apply a mask for time format. I specifically need it to accept only integer numbers in HH:mm format, so here is what I have done: timeInputMask = createMask({ mask: '[99:99]', ...

Troubleshooting steps for resolving a node.js error during execution

I recently delved into server side programming with node.js, but I'm encountering some issues when trying to execute it. My server is set up at 127.0.0.1:80, however, I keep running into errors. Console: Server running at http://127.0.0.1:80/ node:ev ...

I have encountered limitations with useFormik where it does not accept null values for initialValues, even while utilizing a validationSchema

I am currently utilizing the useFormik hook to handle my form. The userId field is a select, so by default its value is set to null. However, my validationSchema requires this field to be populated before submission. const formik = useFormik<ApiCredit ...

What is a way to construct an object without resorting to casts or manually declaring variables for each field?

Click here for a hands-on example. Take a look at the code snippet below: export type BigType = { foo: number; bar?: number; baz: number; qux?: string[]; }; function BuildBigType(params: string[]) { // Here's what I'd like to do: ...

Angular 2 forms, popping the chosen item in the `<select>` element

Check out the FormBuilder: let valuesArray = fb.array([ fb.group({ name: 'one' }), fb.group({ name: 'two' }), fb.group({ name: 'three' }), fb.group({ name: 'four' }) ]); this.for ...

steps to incorporate highcharts offline-exporting in typescript

I've tried the configurations below but they are not working as expected. import * as Highcharts from 'highcharts/highstock'; /*import * as HighchartsExporting from 'highcharts/modules/exporting'; HighchartsExporting(Highcharts);* ...

Failed to set the reference: The first argument includes an undefined property. This error occurred within the context of

My journey with Firebase began just 4 days ago, although I've been a bit inconsistent. My goal was to create a user in the database, and while the user was successfully created, I encountered an issue when trying to return to the profile picture page. ...

Tips for finalizing a subscriber after a for loop finishes?

When you send a GET request to , you will receive the repositories owned by the user benawad. However, GitHub limits the number of repositories returned to 30. The user benawad currently has 246 repositories as of today (14/08/2021). In order to workarou ...