1

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

我已经接管了本教程中与路由相关的所有内容，但我没有得到想要的结果。UI 中的路由器链接有效，但在浏览器的 url 栏中输入路由 url 会出现 404（未找到）错误。首先单击 Invoices 链接会将您带到 localhost/Invoices，但之后刷新会产生 404。

项目可以在这里找到：链接已删除

代码的相关部分：

应用程序路由模块.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 带有 router-outlet 标签：

<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)，但删除标签并不能解决问题。

还有什么我可能会丢失的吗？

4

1 回答 1

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ünter Zöchbauer 提供了指向具有答案的类似问题的链接。

于 2016-10-24T15:46:06.743 回答