Angular Маршрутизация не работает без использования хэша - PullRequest
0 голосов
/ 05 февраля 2020

Я использую Angular для создания одностраничного приложения с маршрутизацией в SharePoint. Единственный способ успешно использовать маршрутизацию - это использовать Angular HashLocationStrategy стиль URL, но я бы хотел исключить использование этого, если это возможно.

* * * * * * проекта HTML файл внедряется в страницу myPage.aspx с использованием веб-части редактора контента.

Вот как выглядит мой RoutingModule:

const routes: Routes = [
  {
    path: 'transactions',
    component: TransactionComponent,
  },
  {
    path: '',
    component: AppComponent,
  },
];

@NgModule({
  imports: [
    // useHash eliminates "Cannot retrieve the URL specified in the Content Link property" error in SharePoint
    RouterModule.forRoot(routes, { useHash: true })
  ],
  exports: [RouterModule]
})

Если я не используйте HashLocationStrategy и перейдите к https://mySite/SitePages/myPage.aspx/transactions, мне показывается следующее сообщение об ошибке:

Не удается получить URL-адрес, указанный в свойстве Content Link. Для получения дополнительной помощи обратитесь к администратору сайта.

Я использую следующую команду сборки: ng build --prod --deploy-url=https://mySite/_catalogs/masterpage/Custom/myPage/dist/ --base-href=https://mySite/SitePages/myPage.aspx. Я счел необходимым использовать флаг --deploy-url, чтобы на странице можно было найти другие файлы проекта, и флаг --base-href, чтобы такие функции в SharePoint, как редактирование страниц, работали.

Как можно заставить работать маршрутизацию без используя HashLocationStrategy?

1 Ответ

1 голос
/ 05 февраля 2020

При использовании API-интерфейса истории браузера для маршрутизации необходимо убедиться, что хост-сервер настроен на перезапись всех запросов к вашему входному файлу.

Если URL-адреса вашего домена не переписываются, сервер попытается открыть несуществующую (на стороне сервера) страницу. При перезаписи все запросы будут направлены обратно в файл ввода вашего приложения, а затем приложение позаботится о визуализации правильного (клиентского) маршрута.

check https://angular.io/guide/deployment для получения дополнительной информации.

...