asp.net mvc hosting angular app with html5mode and routing

Question

Alright, so I am hosting an angularjs inside asp.net mvc 5 and are using the html5mode(true) in my angular app to get rid of all hash signs in the url. Everything works great, however, with my current setup that looks like this:

RouteConfig.cs:

        routes.MapRoute(
            name: "Default",
            url: "app/{angular}",
            defaults: new { controller = "Ng", action = "Index", angular= UrlParameter.Optional }
        );

So that when I navigate to http://url/app/myangularroute my Ng/Index action returns the view which contains the ng-view container and the angular app is now active and working with the route provided

Now, my problem here is, when I navigate to http://url/app/ it returns a dir listning not allowed error which I cannot understand. Shouldn't my index action be returned as the angular parameter is set to optional?

And can I somehow avoid the "app" completely and still get my angular app to work? I have tried some rewrite rules but that gives me alot of errors because I am making use of the mvc bundling and minification functionality.

I could live with the url being the format it currently is but without the need to provide the optional parameter, like http://url/app/

Also, it's only an angular app, no other mvc view than the index.cshtml wrapper.

This guy seems to get it to work, but I can't see his mvc routes

Answer 1

Try adding this in your web.config sytem.webserver settings.

<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
<system.webServer>

EDIT:

Try changing your RouteConfig.cs, like this:

    routes.MapRoute(
        name: "Default",
        url: "app/{*.}",
        defaults: new { controller = "Ng", action = "Index" }
    );

EDIT2:

I had completely forgoten about this question, but now I just realized that maybe the problem is that you haven't configured your IIS Server to work with Html5Mode, have a look at this: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

Concretelly this part:

Azure IIS Rewrites:

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                                 
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

I hope that this helps.

Answer 2

This is my solution. I am using ASP.NET MVC + Web API. ASP.NET MVC always returns the same HTML page for any URL, so AngularJS can take over in $locationProvider.html5Mode(true);

RouteConfig.cs

  routes.MapRoute(
      name: "Default",
      url: "{*anything}",
      defaults: new
      {
        controller = "Home",
        action = "Index",
      }
  );

WebApiConfig.cs

  config.Routes.MapHttpRoute(
          name: "DefaultApi",
          routeTemplate: "api/{controller}/{action}/{id}/{id1}",
          defaults: new
          {
            action = RouteParameter.Optional,
            id = RouteParameter.Optional,
            id1 = RouteParameter.Optional,
          }
      );

HomeController.cs

public ActionResult Index()
{
    return File("~/index.html", "text/html");
}

Answer 3

Alright, I got it to work.

By doing this:

1. Remove the "app" route completely, and use the standard route.
2. Add the rewrite rule
3. Remove the base href from the layout

Ohh wow, I turned off the bundling and minification, that was actually what made it work in the end. When I turn it on I get an angular error.

I honestly thought I tried this like 10 times without success. It started to show signs of working when I removed the base href.

Answer 4

Old question but still valid, this is my solution :

<rewrite>
  <rules>
    <rule name="Main Rule" stopProcessing="true">
      <match url=".*"/>
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <!--for local dev enviroment-->
        <add input="{REQUEST_URI}" pattern="^/(__browserLink)" negate="true" />
        <!--if the url does not match a valid file we don't want it to be redirected to the index page-->
        <add input="{REQUEST_URI}" pattern="\.(png|jpg|gif|css|js|html)$" negate="true" />
        <!--web api route-->
        <add input="{REQUEST_URI}" pattern="^/api/" negate="true" />
        <!--ASP.NET Web API Help Page-->
        <add input="{REQUEST_URI}" pattern="^/Help" negate="true" />
        <!--Swagger-->
        <add input="{REQUEST_URI}" pattern="^/apimap" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

Answer 5

With my ASP.NET 5 RC site - has WebAPI but not MVC - the solution was to up a default rewrite rule in wwwroot\web.config's system.webserver tag:

<rewrite>
  <rules>
    <clear />
    <rule name="API" stopProcessing="true">
      <match url="^(api)(.*)$" />
      <action type="None" />
    </rule>
    <rule name="Main Rule" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

Answer 6

I am facing the same problem, i have set the base href in layout.cshtml ,put the webconfig rewrite rule, when loading the app,In bundle config i have set the all the scripts and css when launch the app ,its not get loaded . unexpected syntax error < is displayed in console.

when i remove the rule and base href and location provider is false , it working fine .

Angular Js Strange issue Ui Router Html5mode enabled page refresh issue in mvc 500 error