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.