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

Question

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?

stackoverflow.com/questions/31415052/…

Günter Zöchbauer
– Günter Zöchbauer

2016-10-24 15:03:33 +00:00
Commented Oct 24, 2016 at 15:03 — Günter Zöchbauer
– Günter Zöchbauer, Commented Oct 24, 2016 at 15:03

NRade · Accepted Answer · 2016-10-24 15:46:06Z

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.

answered Oct 24, 2016 at 15:46

NRade

3273 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related