title: Azure Angular Routing not respected in the browser
body: <h2>Problem Description</h2>
  
  <p>I have an Angular App I put together using the CLI, and deployed to azure semi successfully. Unfortunately, when I navigate to my site, routes are not respected within the browser. Basically, once you get to the site the route is static in the browser. But only when deployed to azure. Locally, everything works right. </p>
  
  <h2>Simple walkthrough</h2>
  
  <p>For example:</p>
  
  <p>Say we start with - <a href="http://my-awesome.site/" rel="nofollow noreferrer">http://my-awesome.site/</a></p>
  
  <p>That route will load, it will function properly. </p>
  
  <p>Then we click a link that takes us to <a href="http://my-awesome.site/route-here" rel="nofollow noreferrer">http://my-awesome.site/route-here</a></p>
  
  <p>That works, it takes me to that route. Except if I look at my browser window it still reads: </p>
  
  <p><a href="http://my-awesome.site/" rel="nofollow noreferrer">http://my-awesome.site/</a></p>
  
  <p>Also, If I start on <a href="http://my-awesome.site/route-here" rel="nofollow noreferrer">http://my-awesome.site/route-here</a> the browser will reflect the proper route. Until you navigate to ANY OTHER ROUTE. Basically, the route you use to get to my site is static in the browser, I can do NOTHING to change it. </p>
  
  <h2>What keeps me up at night</h2>
  
  <p>Locally, it all works correctly.</p>
  
  <p>localhost:4200/ works, clicking localhost:4200/some-route works, the browser updates and reflects the new url of localhost:4200/some-route</p>
  
  <h2>Useful information</h2>
  
  <p>I deployed to Azure through VSTS. I'm not exactly sure what's running udner the hood. Like honestly, I'm new to deploying Angular, and I really put the 'No' in "Node.js Experience". I was recently informed that my windows app server is running IIS pretending to be node, which pretty much blew my mind. </p>
  
  <h2>Vain attempt to work the problem a different way</h2>
  
  <p>So, I stood up a Linux App Server and created a linux build server, and added a server folder, with an index.js and package.json with code from borrowed from John Papa's github</p>
  
  <h3>index.js</h3>
  
  <pre><code>const express = require('express');
  
  const app = express();
  const port = process.env.PORT || 4200;
  const publicweb = process.env.PUBLICWEB || './dist';
  app.use(express.static(publicweb));
  console.log(`serving \\${publicweb}`);
  app.get('*', (req, res) =&gt; {
      tres.sendFile(`index.html`, { root: publicweb });
  });
  app.listen(port, () =&gt; console.log(`listening on http://localhost:4200`));
  </code></pre>
  
  <h3>package.json</h3>
  
  <pre><code>{
    "name": "one-with-angular",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "start": "node index.js"
    },
    "private": true,
    "dependencies": {
      "body-parser": "^1.17.2",
      "express": "^4.15.3"
    },
    "devDependencies": {}
  }
  </code></pre>
  
  <p>and then I followed the tutorial found  at </p>
  
  <p><a href="https://blogs.msdn.microsoft.com/wael-kdouh/2017/09/11/deploying-your-angular-application-to-azure-using-visual-studio-team-services-vsts/" rel="nofollow noreferrer">https://blogs.msdn.microsoft.com/wael-kdouh/2017/09/11/deploying-your-angular-application-to-azure-using-visual-studio-team-services-vsts/</a></p>
  
  <p>To successfully deploy my site. </p>
  
  <h2>Except that was a pile of failure</h2>
  
  <p>When I deployed it to my original windows azure server, the routes were STILL NOT RESPECTED. With the added bonus that if you came in with a route to anywhere, you lost. You got a full-on 404. Because Reasons. Ok, frankly that's part of why I'm here. </p>
  
  <h2>Also Linux was not my key to success</h2>
  
  <p>No, no it wasn't. I mentioned that Linux box earlier. And I totally tried to configure the VSTS build to deploy there. And it did deploy there "successfully". I can get 503s or 404s from that server but I don't get anything else. </p>
  
  <h2>What I would like</h2>
  
  <p>Some direction. </p>
  
  <p>Maybe I've missed a setting in a configuration file that would be like an application setting named "LetAngularRespectRoutesInTheBrowserWhenNotOnLocalhost" </p>
  
  <p>or</p>
  
  <p>Maybe I missed something in that simple index.js file</p>
  
  <p>or</p>
  
  <p>Maybe Linux actually is the key and I need to figure out what's wrong with that build. </p>
  
  <h2>Lastly</h2>
  
  <p>Thank you </p>