How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode

Question

I have the AngularJS seed project and I ve added    locationProvider html5Mode true  hashPrefix         to the app js file  I want to configure IIS 7 to route all requests to       http   localhost app index html   so that this works for me  How do I do this   Update   I ve just discovered  downloaded and installed the IIS URL Rewrite module  hoping this will make it easy and obvious to achieve my goal   Update 2   I guess this sums up what I m trying to achieve  taken from the AngularJS Developer documentation       Using this mode requires URL rewriting on server side    basically you have to rewrite all your links to entry point of your   application  e g  index html    Update 3   I m still working on this and I realise I need to NOT redirect  have rules that rewrite  certain URLs such as   http   localhost app lib angular angular js http   localhost app partials partial1 html   so anything that is in the css  js  lib or partials directories isn t redirected  Everything else will need to be redirected to app index html  Anyone know how to achieve this easily without having to add a rule for every single file   Update 4   I have 2 inbound rules defined in the IIS URL Rewrite module  The first rule is     The second rule is     Now when I navigate to localhost app view1 it loads the page  however the supporting files  the ones in the css  js  lib and partials directories  are also being rewritten to the app index html page - so everything is coming back as the index html page no matter what URL is used  I guess this means my first rule  that is supposed to prevent these URLs from being processed by the second rule  isn t working   any ideas     anyone     I feel so alone     -

User · Answer

I had a similar issue with Angular and IIS throwing a 404 status code on manual refresh and tried the most voted solution but that did not work for me. Also tried a bunch of other solutions having to deal with WebDAV and changing handlers and none worked.

Luckily I found this solution and it worked (took out parts I didn't need). So if none of the above works for you or even before trying them, try this and see if that fixes your angular deployment on iis issue.

Add the snippet to your webconfig in the root directory of your site. From my understanding, it removes the 404 status code from any inheritance (applicationhost.config, machine.config), then creates a 404 status code at the site level and redirects back to the home page as a custom 404 page.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom">
      <remove statusCode="404"/>
      <error statusCode="404" path="/index.html" responseMode="ExecuteURL"/>
    </httpErrors>
  </system.webServer>
</configuration>

User · Answer

I ve been trying to deploy a simple Angular 7 application  to an Azure Web App  Everything worked fine  until the point where you refreshed the page  Doing so  was presenting me with an 500 error - moved content  I ve read both on the Angular docs and in around a good few forums  that I need to add a web config file to my deployed solution and make sure the rewrite rule fallback to the index html file  After hours of frustration and trial and error tests  I ve found the error was quite simple  adding a  tag around my  file markup

User · Answer

In my case I kept getting a 403 14 after I had setup the correct rewrite rules  It turns out that I had a directory that was the same name as one of my URL routes  Once I removed the IsDirectory rewrite rule my routes worked correctly  Is there a case where removing the directory negation may cause problems  I can t think of any in my case  The only case I can think of is if you can browse a directory with your app    lt rule name  fixhtml5mode  stopProcessing  true  gt     lt match url       gt     lt conditions logicalGrouping  MatchAll  gt       lt add input   REQUEST FILENAME   matchType  IsFile  negate  true    gt     lt  conditions gt     lt action type  Rewrite  url       gt   lt  rule gt

User · Answer

The IIS inbound rules as shown in the question DO work  I had to clear the browser cache and add the following line in the top of my  lt head gt  section of the index html page    lt base href   myApplication app     gt    This is because I have more than one application in localhost and so requests to other partials were being taken to localhost app view1 instead of localhost myApplication app view1  Hopefully this helps someone

User · Answer

The issue with only having these two conditions      lt add input   REQUEST FILENAME   matchType  IsFile  negate  true    gt     lt add input   REQUEST FILENAME   matchType  IsDirectory  negate  true    gt    is that they work only as long as the  REQUEST FILENAME  exists physically on disk  This means that there can be scenarios where a request for an incorrectly named partial view would return the root page instead of a 404 which would cause angular to be loaded twice  and in certain scenarios it can cause a nasty infinite loop    Thus  some safe  fallback  rules would be recommended to avoid these hard to troubleshoot issues      lt add input   REQUEST FILENAME   pattern         html   negate  true    gt     lt add input   REQUEST FILENAME   pattern         js   negate  true    gt     lt add input   REQUEST FILENAME   pattern         css   negate  true    gt    or a condition that matches any file ending     lt conditions gt     lt  --     -- gt     lt add input   REQUEST FILENAME   pattern        d w     negate  true    gt   lt  conditions gt

User · Answer

The easiest way I found is just to redirect the requests that trigger 404 to the client  This is done by adding an hashtag even when  locationProvider html5Mode true  is set   This trick works for environments with more Web Application on the same Web Site and requiring URL integrity constraints  E G  external authentication   Here is step by step how to do  index html  Set the  lt base gt  element properly   lt base href    Request ApplicationPath         gt    web config  First redirect 404 to a custom page  for example  Home Error    lt system web gt       lt customErrors mode  On  gt           lt error statusCode  404  redirect    Home Error    gt       lt  customErrors gt   lt  system web gt    Home controller  Implement a simple ActionResult to  translate  input in a clientside route   public ActionResult Error string aspxerrorpath        return this Redirect          aspxerrorpath       This is the simplest way     It is possible  advisable   to enhance the Error function with some improved logic to redirect 404 to client only when url is valid and let the 404 trigger normally when nothing will be found on client  Let s say you have these angular routes   when            templateUrl   Base Home       controller   controllerHome      when   New         templateUrl   Base New       controller   controllerNew      when   Show  title         templateUrl   Base Show       controller   controllerShow       It makes sense to redirect URL to client only when it start with   New  or   Show    public ActionResult Error string aspxerrorpath           get clientside route path     string clientPath   aspxerrorpath Substring Request ApplicationPath Length           create a set of valid clientside path     string   validPaths       New     Show              check if clientPath is valid and redirect properly     foreach  string validPath in validPaths            if  clientPath StartsWith validPath                 return this Redirect          clientPath                        return new HttpNotFoundResult        This is just an example of improved logic  of course every web application has different needs

User · Answer

I write out a rule in web config after  locationProvider html5Mode true  is set in app js    Hope  helps someone out      lt system webServer gt       lt rewrite gt         lt rules gt           lt rule name  AngularJS Routes  stopProcessing  true  gt             lt match url        gt             lt conditions logicalGrouping  MatchAll  gt               lt add input   REQUEST FILENAME   matchType  IsFile  negate  true    gt               lt add input   REQUEST FILENAME   matchType  IsDirectory  negate  true    gt               lt add input   REQUEST URI   pattern     api   negate  true    gt             lt  conditions gt             lt action type  Rewrite  url       gt           lt  rule gt         lt  rules gt       lt  rewrite gt     lt  system webServer gt    In my index html I added this to  lt head gt    lt base href     gt    Don t forget to install IIS URL Rewrite on server   Also if you use Web API and IIS  this will work if your API is at www yourdomain com api because of the third input  third line of condition

[iis] How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?

Examples related to iis

Examples related to url-rewriting

Examples related to angularjs