Angular 4 Router - Page Not Found Error on Redirect

Question

I have an Angular 4 app that is running pretty well.

I have been using HashLocationStrategy but have decided that I would like to move away from having hashes in my urls.

My router set up looks something like this now...

export const routes: Routes = [
  {
    path: '',
    component: TilesComponent
  },
  {
    path: 'profile/:urlUserName',
    component: ProfileComponent
  },
  {
    path: 'forBusiness',
    component: ForBusinessComponent
  },
  {
    path: 'login',
    component: LoginPageComponent
  },
  {
    path: 'editTile/:urlUserName',
    component: EditTileComponent,
    canActivate: [AuthenticationService]
  }

];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(routes, { });

I have a link from my opening page that is generated like this...

routerLink="/forBusiness"

It redirects to this page...

https://www.tilecase.com/forBusiness

Now if I just drop this url into a browser and try to load the forBusiness page alone I get an 'Page not found' error.

What do I need to do to my routes or page setup to get this to work?

Answer 1

there is two types of LocationStrategy 1. HashLocationStrategy 2. PathLocationStrategy

You need PathLocationStrategy

add this in your root-module

import {LocationStrategy, PathLocationStrategy} from '@angular/common'

 // add this in provider
{ provide: LocationStrategy, useClass: PathLocationStrategy }

if your server is apache simply create a file with a name of .htaccess paste this data

 <IfModule mod_rewrite.c>
     Options Indexes FollowSymLinks
     RewriteEngine On
     RewriteBase /myappdirectory/
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]  <--- get the index.html file path starting from public html folder
 </IfModule>

update the last line according to the command

save and then refresh your page. luckily your page works

For IIS server follow this link

http://jasonwatmore.com/post/2017/02/24/angular-2-refresh-without-404-in-node-iis