Angular 2 Удалите хэш (#) из URL-адреса

Я пытаюсь удалить знак # из URL-адреса в Angular 2, но я не нашел никакого хорошего объяснения о том, как его удалить без каких-либо проблем.

Я помню, что на AngularJS 1 было проще добавить $locationProvider.html5Mode(true);

Также я был бы признателен, если вы скажете мне, является ли это хорошей практикой (удаление #) или может повлиять на SEO для приложения (или улучшить его).

PS: Я использую Angular 2 с typescript

Ответы

Ответ 1

Как отметил PathLocationStrategy, PathLocationStrategy является стратегией расположения по умолчанию в Angular2, и, если в URL присутствует символ #, он должен быть где-то переопределен.

Помимо поставщиков модулей проверьте импорт модуля, его также можно переопределить, { useHash: true } в качестве второго аргумента RouterModule.forRoot:

imports: [
    ...
    RouterModule.forRoot(routes, { useHash: true })  // remove second argument
]

Также обратите внимание, что при использовании PathLocationStrategy вам необходимо настроить веб-сервер так, чтобы он обслуживал index.html (точку входа в приложение) для всех запрошенных расположений.

Ответ 2

В angular есть стратегия размещения

Посмотрите на app.module.ts, где приложение загружается там, где есть

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

И удалите эту часть, так как PathLocationStrategy стратегия по умолчанию

Ответ 3

Приведенные выше ответы содержат правильное объяснение об удалении хэша из URL, но при изменении LocationStrategy ваш бэкэнд будет затронут, потому что бэкэнд не понимает все ваши маршруты Angular 2. Вот шаги, чтобы удалить хэш с поддержкой бэкэнда.

1) Измените Angular, чтобы использовать PathLocationStrategy

@NgModule({
  .....
  providers: [
    // Below line is optional as default LocationStrategy is PathLocationStrategy
    {provide: LocationStrategy, useClass: PathLocationStrategy} 
  ]
})

2) Измените базовый Href в index.html, Angular2 будет обрабатывать все маршруты после базового Href.

<base href="/app-context/">

Например

<base href="/app/">

3) На бэкэнд-сервере мы должны обработать файл index.html для любого запроса с шаблоном ниже

"/app/**" - Render index.html for any request coming with "/app/**" pattern

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <base href="/app/">
  </head>
  <body>
    <app-root>Loading...</app-root>
    <script type="text/javascript" src="vendor.bundle.js"></script>
    <script type="text/javascript" src="main.bundle.js"></script>
  </body>
</html>

Ответ 4

Можно ли удалить хеш на определенной странице? (Мне не нужен хеш только для одного маршрута), если я использую {useHash: false}, он применяется ко всем маршрутам, а затем удаляет # из каждого URL в моем приложении.