angular2 app, http request for file json file, 404 on azure

Question

I'm using angular2 and I am doing a http get to retrieve a configuration file that is located at http://MYSITE.azurewebsites.net/config/UIVisuals.json

The file does exist at wwwroot/config/UIVisuals.json when looking at the site with filezilla.

When I run locally everything works fine. When I deploy to azure I get a 404 on the file.

If i put the url into the browser The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

Updated: I've enabled directory browsing on my website and I can now browse to the directory, see the file. If I double click it, I get the The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

So this effectively takes my app out of the picture and makes it more of an azure thing.

What's the azure thing to do here?

Are you doing any URL re-writing to make Angular2 routing work on ASP.Net websites? — rmchndrng
– rmchndrng, Commented Apr 24, 2016 at 1:06
No. I'm just using azure for a temporary home. All it does is serve up index.html and away it goes. It's not going to be an asp.net web site. — jeff
– jeff, Commented Apr 24, 2016 at 2:35
Is the mysite serving index.htm and the related static files? — rmchndrng
– rmchndrng, Commented Apr 24, 2016 at 2:39
that's it. serves index.html, index.html brings in dependencies and app code for client side angular2 webapp. — jeff
– jeff, Commented Apr 24, 2016 at 13:08

David Ebbo · Accepted Answer · 2016-04-24 18:18:37Z

13

Update: I missed that you were trying to serve a JSON file, To make that work, you need to add the following mimeMap to your web.config file:

<?xml version="1.0"?>

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
    </system.webServer>
</configuration>

See this page for details.

Original answer:

There is nothing by default that should block such file from being served. My guess is that you have some custom configuration that causes this. To help isolate what, try the following things:

Is it servable if you put the same file under a different folder, e.g. config2/UIVisuals.json?
Is it servable if you create a brand new web app with nothing else in it, and then simply add your config/UIVisuals.json?

You should use Kudu Console to try things as it's more convenient than FTP.

edited Apr 24, 2016 at 18:18

answered Apr 23, 2016 at 16:25

David Ebbo

43.3k8 gold badges111 silver badges122 bronze badges

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

5 Comments

jeff Over a year ago

when you say new webapp, do you mean a new azure web app, or a simplified angular2 web app?

jeff Over a year ago

i get the same error if I use config2/UIVisuals.json

jeff Over a year ago

Thanks, David. Much joy. ;)

Prasad Honrao Over a year ago

So even if its an Angular 2 application, you still need to add web.config file to support JSON file access in an Angular app deployed on Azure!

Rafael Over a year ago

Getting Error: (SystemJS) XHR error (500 Internal Server Error) loading pathto/app/main.js when adding this code in the Web.config file

chakri · Accepted Answer · 2017-09-19 08:50:55Z

I faced the similar issue with woff, woff2 and otf font files missing. It is working fine in local. But not working in azure deployment. To fix this: created a web.config file in src folder ([your project location]/src/web.config).

Added these contents:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
 <staticContent>
      <!-- In case IIS already has this mime type -->
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
      <remove fileExtension=".otf" />
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
      <remove fileExtension=".svgz" />
      <mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
      <remove fileExtension=".json" />      
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
</system.webServer>
</configuration>

you can add some more file types which is required for your project. It worked fine for me. Hope it will work for you as well.

Collectives™ on Stack Overflow

angular2 app, http request for file json file, 404 on azure

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related