Unable to read json file in angular application using http client in cloud application

Question

I am having issue while reading JSON files in angular application using http client after deployment. FYI, Code is working fine in my local machine and able to fetch JSON details. Once I deploy it into server, getting 404 file not found error though file is not available in server.

File location: src/assets/data/roles.json JSON file location screenshot

Error message: 404 file not found

Please note that I added src/assets/data inside assets array in angular.json file. Still I am getting file not found error in server after deployment but working perfectly in local machine. Also there is no issue with images files inside assets folder. It is working fine. Not sure why not able to read JSON file in server.

angular.json:

"assets": ["src/favicon.ico", "src/assets",
          "src/assets/data"],

service.ts:

        return this.http.get('/assets/data/roles.json').toPromise().then(res => {
        this.data.setRoles(res);
        this.acceptedRoles = this.authService.getAcceptedRoles(state.url);
        this.userRoles = this.authService.getUserRoles();
        matchingRoles = this.userRoles.filter(x => this.acceptedRoles.includes(x))
        if (matchingRoles.length > 0) {
            return true;
        }
        else {
            return false;
        }

Answer 1

I found what was causing the issue. Server is not configured to handle or read JSON files. So I added created and added below code in web.config file under src folder. Issue is resolved.

web.config

<?xml version="1.0" encoding="UTF-8" ?>
<configuration>
<system.webServer>
    <staticContent>
        <remove fileExtension=".json" />
        <remove fileExtension=".woff" />
        <remove fileExtension=".woff2" />
        <mimeMap fileExtension=".json" mimeType="application/json" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />      
    </staticContent>
</system.webServer>