[英]Route parameters in angular not working when angular project is hosted
I am facing issue with route parameters when I deploy my website on namecheap
hosting.当我在
namecheap
主机上部署我的网站时,我遇到了路由参数的问题。
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.当我在本地进行测试时,我能够加载
ProductlistingComponent
组件并且可以获得search_1
和search_2
参数的值。
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
.上面的这个 URL 会给我黑色的冬季连衣裙...我可以根据这些参数显示正确的结果/连衣裙,即
winter
和black
。 In my ProductlistingComponent
component I am fetching the values of search_1
and search_2
as:在我的
ProductlistingComponent
组件中,我将search_1
和search_2
的值获取为:
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.但是,当我将我的网站发布到
namecheap
并尝试访问 URL https://my-domain.com/women
工作正常并显示ProductlistingComponent
组件时。
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.以前,我的 URL 中的
#
存在问题。 I solved that my defining some APACHE rules in .htacess
file.我解决了我在
.htacess
文件中定义一些APACHE规则的问题。
.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.此外,我还在我没有遇到此问题的 firebase 托管上部署了网站。 Why i am hosting on
namecheap
?为什么我在
namecheap
上托管? My boss said so.我的老板是这么说的。
Any help is appreciated.任何帮助表示赞赏。
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.要解决上述问题,您只需使用以下命令构建 Angular 项目。
ng build --prod --base-href=yoursubfolder // your sub-folder
ng build --base-href=/dist/dress/ // in my case
instead of代替
ng build
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.