Ссылки маршрутизатора Angular 2 работают, но маршрутизация ввода URL-адреса браузера не работает

Я пытаюсь настроить маршрутизацию в решении Angular 2 ASP.NET, используя этот учебник в качестве примера: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

Я взял все, что касается маршрутизации, из этого руководства, но не получил желаемого результата. Ссылки на маршрутизаторы в пользовательском интерфейсе работают, но ввод маршрутизируемого URL-адреса в адресную строку браузера приводит к ошибке 404 (не найдено). Щелчок по ссылке Invoices сначала приводит вас к localhost/Invoices, но последующее обновление дает 404.

Проект можно найти здесь: ссылка удалена

Соответствующие части кода:

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 имеет:

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="/">

В шаблоне есть еще один компонент (ui.component.html) с тегами router-outlet, но удаление тегов не решает проблему.

Что-нибудь еще, что я мог пропустить?


angular routerlink routing
person NRade    schedule 24.10.2016    source источник
comment
stackoverflow.com/questions/31415052/   -  person Günter Zöchbauer    schedule 24.10.2016

Ответы (1)


arrow_upward
1
arrow_downward

Решил проблему, добавив:

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

в глобальный.asax

Спасибо Гюнтеру Цохбауэру за ссылку на аналогичный вопрос, на который были даны ответы.

person NRade    schedule 24.10.2016