Angular 2 Удалить хэш (#) из URL

45

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

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

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

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

Теги:
angular

3 ответа

67
Лучший ответ

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

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

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

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

Поделиться
  • 2
    Народ, в ng build --prod это решение не работает, выдает ошибку 404 .. какая подсказка?
  • 4
    Это решает проблему удаления #, но когда мы обновляем страницу или h5, это не работает.
Показать ещё 3 комментария
25

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

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

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

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

Поделиться
  • 1
    он работает для ng serve, но не для ng build --prod, какая-либо подсказка? Спасибо!
  • 0
    @HydTechie какие-либо ошибки данных? :)
Показать ещё 3 комментария
16

Приведенные выше ответы содержат правильное объяснение об удалении хэша из 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню