Angular app being able to access json file under assets folder in Microsoft Azure

Question

Currently i have an angular 9 app which is able to access config.json file placed under assets folder.I have config service which is responsible for reading from this file. This works with no issues when i run locallly. The file path is /dist/assets/config.json.

However when i deploy this app on azure as Azure App Service (windows OS) strangely the app cannot find this config.json file even though i can clearly see the file is under assets folder. Below are the relevant code from each file. The code fails when the config service tries to grab the file config.json with an error message

Error occured 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 also referred to this link Angular app unable to find asset files on Azure but the solution proposed there doesnt work in my case. I have also set "allowSyntheticDefaultImports": true in my tsconfig.app.json file.

@AakashGarg It doesnt give any errors. It can access the file without any issue. — Sike12
– Sike12, Commented May 25, 2020 at 9:14
the url getting formed for accessing that json is correct? you check network tab? — Aakash Garg
– Aakash Garg, Commented May 25, 2020 at 9:21

Aakash Garg · Accepted Answer · 2020-05-25 11:34:26Z

1

ng build --prod --base-href /unrc-willis-web/

Or Try

ng build --prod --base-href "./"

Also interceptor had issues. interceptor was getting used for a non required call

edited May 25, 2020 at 11:34

answered May 25, 2020 at 9:31

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Sike12 Over a year ago

Build failed as it doesnt like the second parameter. I think what we need to find out is to somehow find a relative path to that location.

Aakash Garg Over a year ago

yes, and remove --prod from it. Might be your code is not aot compatible. Refer devblogs.microsoft.com/premier-developer/…

Sike12 Over a year ago

An unhandled exception occurred: Project './' does not support the 'build' target.

Sike12 Over a year ago

Please note i am using AzureDevops build and the code repository is in Git

Aakash Garg Over a year ago

can you try accessing your json directly in your browser from azure url?

|

Collectives™ on Stack Overflow

Angular app being able to access json file under assets folder in Microsoft Azure

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related