Route parameters in angular not working when angular project is hosted

Question

I am facing issue with route parameters when I deploy my website on namecheap hosting.

My Routes:

const routes: Routes = [

    { path: 'women', component: ProductlistingComponent }, 
    { path: 'women/:search_1', component: ProductlistingComponent },
    { path: 'women/:search_1/:search_2', component: ProductlistingComponent }, 

    { path: 'men', component: ProductlistingComponent }, 
    { path: 'men/:search_1', component: ProductlistingComponent },
    { path: 'men/:search_1/:search_2', component: ProductlistingComponent }, 
]

Local Testing

When i test locally, i am able to load the ProductlistingComponent component and can get the values of search_1 and search_2 parameters.

For instance:

localhost:4200/women/winter/black

this above URL will give me dresses for winter in black color... I can display proper result/dresses based on these parameter's ie winter and black . In my ProductlistingComponent component I am fetching the values of search_1 and search_2 as:

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

some_function() {

    this.route.snapshot.paramMap.get("search_1") // received winter 
    this.route.snapshot.paramMap.get("search_2") // received black
}

Problem:

However, when I publish my website to namecheap and try to access URL https://my-domain.com/women works fine and ProductlistingComponent component is displayed.

But when I pass values like

https://my-domain.com/women/black/winter 

or

https://my-domain.com/women/black

I get blank page.

I am not sure why this problem occurs. Previously, I had an issue with the # in my URL. I solved that my defining some APACHE rules in .htacess file.

.htaccess file code



<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteBase /dist/dress/
  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
  RewriteRule ^(.*) index.html [NC,L] 
</IfModule>

Moreover, I also deployed website on firebase hosting where I don't had this issue. Why i am hosting on namecheap ? My boss said so.

Any help is appreciated.

Answer 1

Namecheap Hosting

My project folder was not in root but inside a folder.

--public_html
    --dist
        --dress
            --index.html
            --.htaccess
            --rest-of-the-project-files

To solve the above problem, you will simply build your angular project with below command.

ng build --prod --base-href=yoursubfolder // your sub-folder

ng build --base-href=/dist/dress/  // in my case

instead of

ng build