Angular 4从url中删除哈希(#)

Question

我的app.module.ts

@NgModule({
.......
  providers: [
....
    { provide: LocationStrategy, useClass: HashLocationStrategy},
....
]
});

当我删除这部分时,它可以在我的localhost中工作但是在进行了构建 或ng构建--prod之后,当我刷新页面或h5时它不起作用.它给出了404错误.我想从我的网址中删除哈希(#).有解决方案吗

Answer 1

您可以查看有关部署的角度指南

我们来谈谈HashLocationStrategy和之间的区别PathLocationStrategy.有关详细信息,请查看文档

默认情况下,Angular使用PathLocationStrategy.

假设您的申请中有以下路线.

const routes: Route[] = [{
   path: '',
   redirectTo: 'home',
   pathMatch: 'full'
},
{
   path: 'home',
   component: HomeComponent
}];

当您路由到此组件时,您的地址栏将如下所示localhost:4200/home.如果您使用HashLocationStrategy,它看起来像localhost:4200/#home.那么,这有什么区别？

• PathLocationStrategy

  当您在页面上Home并按下F5按钮或刷新页面时,浏览器将发出一个请求,localhost:4200/home由angular-cli处理,您将HomeComponent返回.

• HashLocationStrategy

  同样,当你点击时F5,浏览器会向localhost:4200这个时间发出请求,因为它会忽略后面发生的任何事情#

如果您不想拥有#,请删除您指出的部分.这将是PathLocationStrategy默认的.但是,当您运行应用程序之外,这使我们分开,angular-cli这意味着从某个服务器构建和提供它.假设你用你的应用程序构建你的应用程序ng build并且你有你的缩小的,编译好的javascript文件.您将它部署到运行的某个服务器上yourdomain.com

此外,您将这个构建的捆绑角度应用程序放在某个URL上,以便人们可以访问您的应用程序yourdomain.com/ng-app,这里的一切都很好.甚至,当你路由到HomeComponent它时,它会工作,你的地址栏看起来像yourdomain.com/ng-app/home.但是,当您点击F5此时,您的浏览器将向yourdomain.com/ng-app/home您的服务器上的请求提出请求,因为您从中提供了应用程序/ng-app.您必须在服务器端进行一些配置,以便您可以提供所有开头的内容/ng-app/**.

例如,我的s​​pring应用程序有这个方法返回角度应用程序,

@GetMapping("/ng-app/**") 

因此,当我的服务器获得一个以...开头的请求时/ng-app,它只是将它传递给角度应用程序,它将处理正确的路由.

希望,这为你澄清它.