Encountering a problem with route parameters after deploying my website on namecheap
hosting.
Routes Setup:
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 },
]
Issue in Local Testing
During local testing, the ProductlistingComponent
loads successfully and retrieves values for search_1
and search_2
parameters.
For example:
localhost:4200/women/winter/black
The above URL displays dresses for winter in black color... Correct results are shown based on parameters like winter
and black
.
In the ProductlistingComponent
component, I capture the values of search_1
and search_2
as follows:
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 Encountered:
After publishing the website to namecheap
, accessing the URL https://my-domain.com/women
works fine and displays the ProductlistingComponent
. However, passing values like
https://my-domain.com/women/black/winter
or
https://my-domain.com/women/black
results in a blank page being displayed.
The reason behind this issue is unclear. Previously, there was an issue with the #
in the URL which was resolved by defining some APACHE rules in the .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>
Additionally, the website was also deployed on firebase hosting without encountering this issue. The reason for hosting on namecheap
was per instructions from my boss.
Any assistance would be highly appreciated.