Question

我尝试使用本教程作为示例在Angular 2 ASP.NET解决方案中设置路由： https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

我已从本教程中接管了与路由相关的所有内容，但我没有得到所需的结果。 UI中的路由器链接有效，但在浏览器的url栏中输入路由URL会产生404（未找到）错误。单击“发票”链接首先会显示本地主机/发票，但之后刷新会产生404。

项目可在此处找到：链接已删除

代码的相关部分：

应用程序的路由-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有：

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

和

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

带路由器插座标签的app.component.html：

<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以：

开头

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

模板中还有另一个带有router-outlet标签的组件（ui.component.html），但删除标签并不会使问题消失。

我还有什么遗漏？

Answer 1

通过添加以下解决问题：

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

到global.asax

感谢GünterZöchbauer提供了一个类似问题链接的链接。

Angular 2 routerlinks工作但浏览器URL输入路由不起作用

1 个答案: