如何配置IIS以允许AngularJS路由到HTML

Question

How do configure my IIS to allow AngularJS to route to an HTML page in my solution?

Here is my routeProvider:

$routeProvider.when('/', {
    controller: "ProfileController",
    templateUrl: "/Views/Profile/Main.html"
})

But as expected I receive a 404 message, and I understand that the default configuration will attempt to follow the MVC Net Routing. How would I achieve this? Is there a better solution? I have an idea that I have to change my Web.config file and I think I have to change my <system.webServer> configuration, but I dont know what to change it to.

Here is my current(default) <system.webServer> configuration:

<system.webServer>
    <modules>
      <remove name="FormsAuthentication" />
    </modules>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
  </system.webServer>

The reason I bring up the IIS is because I have read on several sites to include something like following to the </system.webServer> configuration link :

<system.webServer>
  <modules runAllManagedModulesForAllRequests="true" />
  <rewrite>
    <rules>
      <!--Redirect selected traffic to index -->
      <rule name="Index Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_URI}" matchType="Pattern" pattern="^/api/" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Answer 1

There is nothing wrong with IIS. By default an MVC application is configured to not return anything residing in the Views folder.

My recommendation would be to put your static HTML file(s) in a folder other than Views.

If for some reason you can't do that, go to the Views folder and open the web.config. You'll find something like the following.

<handlers>
  <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
</handlers>

Basically that's saying that no matter what is asked for using any HTTP verb you're going to get a 404. You can change the path="*" to something more specific, such as path="*.cshtml" which would prevent your Razor views from being served up directly but allow other files to still be served.

Answer 2

I see you're using .html and not .cshtml. I've recently tried this with ASP.NET MVC and noticed one option is to have your first page named index.html and in the root of or project and remove all MVC routing stuff. IIS by default will see that index.html is the only option it has and run that page. Then in your angular routing you can put the other pages in Views and route to that.

The biggest issue, and in my mind a big one, is that to be able to get pretty url direct navigation (the user types yoururl.com/help) you have to do the last part you mentioned. You have to do this because your routing is done in index.html and that allows the pretty url to work. The user can use the # sign's in the url and get there but that sucks for them.

It just seems lame that we have to change the web server config to account for all of this. I get why, but sucks we have to do it and there wasn't some other easier way.