Error 404 on Angular 2 app when deployed to Azure

Question

I have an angular 2 app with a simple server.js as a node.js BE.

I have deployed my application to Azure and I'm at the point that the application loads and shows me the welcoming page.

When I reach a component that tries to read a local JSON via an HTTP request I'm getting a 404 error (that I don't receive in my local environment).

The code to read the json is the following:

private ReadFromJson(path: string): Observable<string[]> {
    return this._http.get(path)
        .map((response: Response) => <string[]>response.json())
        .do(data => console.log('All: ' + JSON.stringify(data)))
        .catch(this.handleError);
}

where the actual path passed is the one showed in the console.

I have done two things: First I made sure that the file is actually there using the Azure CLI, and it is there as expected.

Secondly, after viewing many posts the only other solution I found was to add the MIME type as suggested here, but that didn't work for me as well.

I would really like some help in understanding and be troubleshooting the problem, any suggestion is welcomed!

Answer 1

Update:

If your app is just front-end (Angular) app, then you no longer need to serve these static files via Node.js. Because by default Azure App Service have installed IIS on it and IIS can serve any file type by doing some configuration. So, in this case, you can just keep web.config looking like below and put it to "site/wwwroot/dist".

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

---

As you deployed a Node.js on Azure App Service, which would host your app using iisnode, and you probably have a web.config file that looks like the content in this link.

By default, this configuration file assumes the static file in the /public folder.

<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
    <action type="Rewrite" url="public{REQUEST_URI}" />
</rule>

So, after you add this to web.config,

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>

please make sure the static files were put into /public file.

Answer 2

I ran into the same problem last week and thought maybe i should share my findings since i got it to work as desired.

I deployed the app developed using angular cli and built using the same. I copied over all files in the /dist folder over to azure and added a web.config (this was a lot of hit and trial) but i learned that a rewrite rule for angular was required which can process the webpack bundled assets and not return a 404.

Here is the web,config and i believe it should work for you as-is:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.web>
    <httpRuntime maxQueryStringLength="32768" maxUrlLength="65536" />
  </system.web>
  <system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxQueryString="32768" />
      </requestFiltering>
    </security>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico|.svg|.eot|.woff|\​.woff2)).*$" />
          <conditions logicalGrouping="MatchAll"></conditions>
          <action type="Rewrite" url="/" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
    </staticContent>
  </system.webServer>
</configuration>
<!--

This is required for the app to work in Azure or an ASP.NET hosting environment because the woff files 
are not treated as static content on Azure as well as the routing breaks without the rewrite rule below 
and app or rather the server returns a 404.

-->