CODEWITHSUNDEEP
angularangular-routing
A. L
A. L

Reputation: 12669

Angular 2 - can redirect route, but using direct link doesn't work

So this is what my app-routing.module.ts looks like

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { IndexComponent } from './index.component';
import { ErrorComponent } from './error.component';

const routes = [ 
    { path: 'hira', redirectTo: 'search', pathMatch: 'full' },
    { path: 'search', component: AppComponent, pathMatch: 'full' },
    { path: 'main', component: AppComponent },
    { path: 'error', component: ErrorComponent },
    { path: '**', redirectTo: 'error'}
];

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

export class AppRoutingModule {}

When I go into the site e.g. www.website.com/hira it will redirect to www.website.com/hira/search. However if I then use that link directly (refresh it), it will not work and give me a 404.

So I'm wondering if I need to make children or something.

Also, right now I have <base href="./"> within the hira folder. And the reason why I have path: 'hira' is because it doesn't work without it, so I was also wondering if there was a way to make it relative to the subfolder hira.

Resolved: Used hashhistory instead. Could use browserhistory but requires htaccess

Upvotes: 2

Views: 2849

Answers (1)

Prabh
Prabh

Reputation: 1069

Workaround:

Use hashbangs. However, I would not recommend them.

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

Fix:

Depending on the web server, configure it to redirect all the requests including 404, 401 to the same index.html page.

Angular handles all the requests from there on and is able to redirect to different paths.

Here is a response from the core Angular team member to a similar issue.

Upvotes: 2

Related Questions