angular 4 application routing issues when deployed in cloud foundry

Question

I have a unique routing issue here, I have an angular application which works fine at my local, but when the application is deployed to the cloud foundry the routing simply does not work at all(it gives 404).

Here is the code snippet of routing

import  { LocationStrategy,  PathLocationStrategy }  from  '@angular/common';
const  appRoutes:  Routes  =   [{
  path:   '',
  component:  PageNotFoundComponent
 },
 {
  path:   'contents',
  component:  ContentsComponent
 },
 {
  path:   'sidebar',
  component:  SidebarComponent
 }
];

I am looking for these:

routing conditions:

1. Routing without hashing.
2. Entering URL directly to the browser should navigate to the page.
3. 404 error should not be shown.

Any suggestion?

Answer 1

The solution was to use .HTACCESS file with routing conditions. Use the "php_buildpack" as the buildpack while deploying the application to the cloud foundry

The routing condition used in the .htaccess file

`RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

not rewrite css, js and images

RewriteCond %{REQUEST_URI} !.(?:css|js|map|jpe?g|gif|png)$ [NC]

RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]`