Angular сбой маршрутизации на удаленном сервере, работающем локально - PullRequest
Новая
       116

Angular сбой маршрутизации на удаленном сервере, работающем локально

0 голосов
/ 03 августа 2020

У меня очень простой проект со следующей маршрутизацией. 

const routes: Routes = [
  { path: "start", component: StartComponent },
  { path: "sub01", component: Sub01Component },
  { path: "", redirectTo: "/start", pathMatch: "full" },
  { path: "**", component: StartComponent }
];

Когда я запускаю его локально, используя ng serve и просматривая localhost: 4200 , я вижу содержимое начальной страницы и URL-адрес перезаписываются на localhost: 4200 / start , как и ожидалось. Затем я создал полуфинальную версию ng build и поместил в каталог dist на моем IIS. Переход по адресу приложения дает тот же результат, что и выше. Я также могу подтвердить, что просмотр, например, URL-адресов изображений также дает ожидаемый результат.

Разница, как я заметил, заключается в том, что локально он работает для перезагрузки страницы (т. Е. При переходе на localhost: 4200 / start ), в то время как та же операция на пульте дистанционного управления не работает, что дает мне 404 (поэтому серфинг на http://address.that-worked-just.now/start не работает). Поскольку я могу получить доступ к другим URL-адресам, кроме root, мне кажется, что только маршрутизация не работает.

Я немного ошеломлен таким поведением и не знаю, как его диагностировать дальше. Единственное различие, о котором я знаю, в пределах моей досягаемости, заключается в том, что локально я обслуживаю приложение, используя стандартный Angular CLI, а на удаленном компьютере у меня есть IIS, который обслуживает индекс. html содержащий скрипт . Итак, я полагаю, что как только документ передается клиенту, все остальное происходит на клиенте. (Приложение действительно ограничено, и в нем нет взаимодействия с сервером, служб и т. Д. c., Поскольку это в основном целевая страница, по крайней мере, на данный момент).

Мне не хватает чего-то, что должно быть объявлено в любом из файлов конфигурации? Или это может произойти из-за какой-то политики брандмауэра или чего-то подобного? Я не знаю, как это определить, и скорее предполагаю, что сделал что-то глупое, чем виню команду серверов. Что еще можно сделать из вышеприведенного описания?

1 Ответ

2 голосов
/ 04 августа 2020

IIS имеет собственную систему маршрутизации. Поэтому, когда мы размещаем Angular в IIS, маршрутизация Angular будет неудачной, потому что IIS не понимает маршрутизацию Angular и будет искать ресурс, соответствующий маршруту, и выдает ошибку 404.

Чтобы решить эту проблему, вы можете попробовать одно из следующих решений:

Используйте правило перезаписи URL-адреса IIS для установки маршрутизации: 

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Источник: https://angular.io/guide/deployment#fallback -configuration-examples

Другой способ - добавить страницу ошибки для 404 для перенаправления на /index.html.

введите описание изображения здесь

...