1

このチュートリアルを例として使用して、Angular 2 ASP.NET ソリューションでルーティングを設定しようとしています: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

このチュートリアルからルーティングに関連するすべてを引き継ぎましたが、望ましい結果が得られません。UI のルーター リンクは機能しますが、ブラウザーの URL バーにルーティングされた 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]
})

router-outlet タグを含む 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) がありますが、タグを削除しても問題は解決しません。

私が行方不明になる可能性のあるものは他にありますか？

4

1 に答える 1