Angular 2 routerlinks work but browser url input routing doesn't

问题

I'm trying to set up Routing in an Angular 2 ASP.NET solution using this tutorial as an example: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

I have taken over everything relating to routing from this tutorial, yet I'm not getting the desired result. Router links in the UI work, but entering a routed url in the browser's url bar gives a 404 (not found) error. Clicking the Invoices link first brings you to localhost/Invoices, but refreshing afterwards yields 404.

Project can be found here: link deleted

Relevant parts of code:

app-routing-module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { 
HomeComponent, 
InvoicesComponent, 
InvoiceDetailsComponent, 
ChargeDetailsComponent, 
ShipmentsComponent, 
ShipmentDetailsComponent 
} from './pages';

import { UiComponent, UI_ROUTES } from './ui';

const routes: Routes = [
  { path: 'invoices', component: InvoicesComponent },
  { path: 'invoices/:id', component: InvoiceDetailsComponent },
  { path: 'invoices/charges', component: InvoiceDetailsComponent },

  { path: 'invoices/:id/:id', component: ChargeDetailsComponent },
  { path: 'invoices/charges/allocation', component: ChargeDetailsComponent },

  { path: 'shipments', component: ShipmentsComponent },
  { path: 'shipments/:id', component: ShipmentDetailsComponent },
  { path: 'shipments/details', component: ShipmentDetailsComponent },

  { path: '', component: HomeComponent },
  { path: '**', component: HomeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts has:

import { AppRoutingModule }   from './app-routing.module';

and

@NgModule({
  declarations: [...],
  imports: [..., AppRoutingModule]
})

app.component.html with router-outlet tags:

<div id="main-nav">
    <a [routerLink]="['/']" ez-btn look="block warning" icon="home"></a>    
    <ez-fly [nav]="mainNav" icon="bars" look="primary block"></ez-fly>
</div>    
<div id="app-body" class="container-fluid">    
    <router-outlet></router-outlet>
</div>

index.html starts with:

<!DOCTYPE html>
<html>
  <head>
    <base href="/">

There is another component (ui.component.html) with router-outlet tags in the template, but removing the tags does not make the problem go away.

Anything else I could be missing?

回答1:

Solved problem by adding:

private const string ROOT_DOCUMENT = "/index.html";

    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);
    }

to global.asax

Thanks to Günter Zöchbauer for providing a link to a similar question that had the answers.

来源：https://stackoverflow.com/questions/40221548/angular-2-routerlinks-work-but-browser-url-input-routing-doesnt

标签

angular

routing

routerlink