Angular 2 Routing - Open Links from address bar

Question

When I try to open Angular 2 routes from the address bar I continually receive http 404 responses, however navigating to the routes using anchors with "routerLink" directives works without issue. I've attempted to modify my web.config file for url rewrites as instructed in Angular's Deployment Guide but this usually breaks my routing altogether. Lastly, I did include <base href="/"> in my index.html file, but this also has not helped. Any assistance from the community is much appreciated!

Here's my routing component code:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ClientsComponent } from './clients.component';

const routes: Routes = [

    { path: 'clients', component: ClientsComponent },
     //^This does not work from address bar, only from routerLinks.
    {
        path: '**',
        redirectTo: '',
        pathMatch: 'full'
    },   
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }

You can easily solve this issue by enable #based routing by saying [RouterModule.forRoot(routes, {useHash: true})] if you don't need html5mode routing — Pankaj Parkar
– Pankaj Parkar, Commented Jun 16, 2017 at 16:00
Thank you Pankaj, this worked, but I'd prefer not to have the # symbol in my urls. Seems like a "hacky" workaround. Is this just a known issue with Angular 2 and IIS? — DotNetDev
– DotNetDev, Commented Jun 16, 2017 at 16:34
No, this can happen with any server..not specifically with IIS. You have to configure your server to handle such request.. May I know which module loader you're using systemjs/weback? — Pankaj Parkar
– Pankaj Parkar, Commented Jun 16, 2017 at 16:37
I'm using systemjs. Also I'm developing with visual studio so I'm debugging using the VS debugger/build system rather than using npm/node — DotNetDev
– DotNetDev, Commented Jun 16, 2017 at 17:26
Are you getting any error in console while you're trying to page directly changing URL? — Pankaj Parkar
– Pankaj Parkar, Commented Jun 16, 2017 at 20:04

Mani S · Accepted Answer · 2017-06-16 16:01:55Z

2

Try setting usehash to true, this should solve your problem.

RouterModule.forRoot(routes, { useHash: true })

answered Jun 16, 2017 at 16:01

Mani S

2,5811 gold badge14 silver badges12 bronze badges

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

2 Comments

DotNetDev Over a year ago

Thank you Mani, Panaj offered the same in his comment. This solution works, but I'd prefer not to have the # symbol in my urls.

DotNetDev Over a year ago

Ended up enabling "useHash" as I could not figure out a better solution. Thanks!

Collectives™ on Stack Overflow

Angular 2 Routing - Open Links from address bar

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related