Angular 4从URL中删除哈希(#) [英] Angular 4 remove hash(#) from url

问题描述

我的app.module.ts

my app.module.ts

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

当我删除此部分时，它可以在我的本地主机上工作，但是在使用 ng build 或 ng build --prod 后，当我刷新页面或h5时，它没有不行它给出404错误. 我想从我的网址中删除哈希(#).有什么办法吗?

when i remove this part, it's works in my localhost but after taking a ng build or ng build --prod , when i refresh the page or h5 it doesn't work. It gives 404 error. I want to remove hash(#) from my url. Any solution ?

推荐答案

您可以检查角度指南关于部署

让我们讨论一下HashLocationStrategy和PathLocationStrategy之间的区别.有关更多信息，请检查文档

Let's talk about the difference between HashLocationStrategy and PathLocationStrategy. For more info, check the docs

默认情况下，Angular使用PathLocationStrategy.

Angular, by default, uses PathLocationStrategy.

假设您的应用程序中包含以下路线.

Let's say you have following routes in your application.

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

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

When you route to this component, your address bar will look like localhost:4200/home. If you used HashLocationStrategy, it would look like localhost:4200/#home. So, what's the difference here?

• PathLocationStrategy

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

When you are on page Home and hit F5 button or refresh the page, the browser will make a request to localhost:4200/home which will handled by angular-cli and you'll have your HomeComponent returned.

HashLocationStrategy

同样，当您点击F5时，浏览器这次将向localhost:4200发出请求，因为它会忽略#

Likewise, when you hit F5, the browser will make the request to localhost:4200 this time, because it ignores whatever comes after #

如果您不想拥有#，请删除您指出的部分.默认情况下为PathLocationStrategy.但是，当您在angular-cli之外运行应用程序时，这使我们分崩离析，这意味着可以从某些服务器上构建和提供服务.假设您使用ng build构建应用程序，并且获得了经过精简的javascript文件.您将其部署到运行在yourdomain.com

If you don't want to have #, then remove the part you pointed out. It'll be PathLocationStrategy by default. However, this brings us to part when you run your application outside of angular-cli which means building and serving it from some server. Let's say you build your application with ng build and you have your minified, compiled javascript files. You deploy it to some server which runs on yourdomain.com

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

Also, you put this built, bundled angular application at some url so that people will access your application from yourdomain.com/ng-app, everything is fine here. Even, when you route to HomeComponent, it'll work and your address bar will look like yourdomain.com/ng-app/home. However, when you hit F5 at this point, your browser will make request to yourdomain.com/ng-app/home which does not exist on your server because you serve your application from /ng-app. You have to do some config at your server side so that you can serve everything that starts with /ng-app/**.

例如，我的s​​pring应用程序具有此方法，该方法返回角度应用程序，

For example, my spring application has this method that returns the angular application,

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

因此，当我的服务器收到以/ng-app开头的请求时，它将把它传递给可以处理正确路由的angular应用程序.

So when my server gets a request that starts with /ng-app, it just passes this to angular application which will handle the correct route.

希望，这可以为您澄清一下.

Hope, this clarifies it for you.

这篇关于Angular 4从URL中删除哈希(#)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！