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, May 25 '20 at 09:14
@AakashGarg there is no image in the assets folder. All i have is config.json file there. There is one file favicon.io and it is at the root folder (directly under wwwroot folder) i can see that file being loaded without any issue — Sike12, May 25 '20 at 09:21
the url getting formed for accessing that json is correct? you check network tab? — Aakash Garg, May 25 '20 at 09:21
@AakashGarg surprisingly in the network tab i dont see any information about config.json. i can see the one for favicon.ico though — Sike12, May 25 '20 at 09:26

Aakash Garg · Accepted Answer · 2020-05-25T11:34:26.147

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 '20 at 11:34

answered May 25 '20 at 09:31

Aakash Garg

10,649
2
7
25

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. – Sike12 May 25 '20 at 09:46
yes, and remove --prod from it. Might be your code is not aot compatible. Refer https://devblogs.microsoft.com/premier-developer/tips-for-running-an-angular-app-in-iis/ – Aakash Garg May 25 '20 at 09:49
An unhandled exception occurred: Project './' does not support the 'build' target. – Sike12 May 25 '20 at 10:01
Please note i am using AzureDevops build and the code repository is in Git – Sike12 May 25 '20 at 10:02
can you try accessing your json directly in your browser from azure url? – Aakash Garg May 25 '20 at 10:02
Yes i can access it and see the file contents as well via the url. – Sike12 May 25 '20 at 10:04
is it same as it hits from angular? – Aakash Garg May 25 '20 at 10:05
when the angular app runs i dont see any url accessing the json file in the network tab. I have a feeling the way i have defined the path here is not correct. this.http.get("assets/config.json") – Sike12 May 25 '20 at 10:07
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/214564/discussion-between-aakash-garg-and-sike12). – Aakash Garg May 25 '20 at 10:12
@Sike12, if it worked for you. please vote my answer. and refere to https://stackoverflow.com/questions/47869196/angular-4-http-request-error-you-provided-undefined-where-a-stream-was-expe how to modify your interceptor for not adding authorization header to assets request. – Aakash Garg May 25 '20 at 11:20
Sorry @Aakash. My PC crashed and had to restart everything. Let me know if you can make for another zoom meeting sometime later in future. For now i'll accept your answer. Thank you for your time today. – Sike12 May 25 '20 at 11:23
we can have it now? – Aakash Garg May 25 '20 at 11:32

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

1 Answers1