2

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

A. L
  • 11,695
  • 23
  • 85
  • 163
  • you work with ng cli? or how do you run your project? – Wilder Perozo Dec 13 '16 at 01:24
  • I just use the npm start, and I'm just accessing it like a typical apache server (not using their ip:port because it seems to not work well with php files). – A. L Dec 13 '16 at 01:25
  • http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser. I believe you are trying to request a page that does not really exist – Kyrsberg Dec 13 '16 at 09:38

1 Answers1

2

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.

Prabh
  • 989
  • 5
  • 10