Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

asp.net mvc hosting angular app with html5mode and routing

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

like image 852
Josef Avatar asked Sep 08 '14 18:09

Josef


Video Answer


1 Answers

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.

like image 160
Josep Avatar answered Oct 11 '22 19:10

Josep