CODEWITHSUNDEEP
jsonangulartypescriptazureobservable
Sike12
Sike12

Reputation: 1262

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

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.

Upvotes: 0

Views: 1977

Answers (1)

Aakash Garg
Aakash Garg

Reputation: 10979

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

Upvotes: 1

Related Questions