html5mode gives 404 not found

问题

I'm trying to remove the hashtag from the URL in my AngularJS app. I'm using Web API 2.0 to retrieve some data. This is what I've done:

In my app.js

app.config(function($routeProvider, $locationProvider) {
        $routeProvider
            .when("/products", {
                templateUrl: "app/products/productListView.html"
            })
            .when("/products/:id", {
                templateUrl: "app/products/productInfoView.html" 
            })
            .otherwise({ redirectTo: "/products" });

        $locationProvider.html5Mode(true);
});

I've also added <base href="/"> to my index.html.

It works fine when I go to http://localhost:49767/ and navigate from there using links.

For example, clicking a product takes me to http://localhost:49767/products/5 and loads the information just fine. However, if I go directly to http://localhost:49767/products or directly to a specific product I get 404 not found error from IIS.

What am I missing?

回答1:

You have to configure your server to work with html5mode.

ASP.Net C# Rewrites

In Global.asax

private const string ROOT_DOCUMENT = "/default.aspx";

protected void Application_BeginRequest( Object sender, EventArgs e )
{
    string url = Request.Url.LocalPath;
    if ( !System.IO.File.Exists( Context.Server.MapPath( url ) ) )
        Context.RewritePath( ROOT_DOCUMENT );
}

See this link for more information

回答2:

In my app, my way is :

delete $locationProvider.html5Mode(true);

and <a href="#/products/1">1</a><a href="#/products/2">2</a>

来源：https://stackoverflow.com/questions/31424507/html5mode-gives-404-not-found