Angular2 - обновление страницы 404ing при размещении в Azure

Я работаю над приложением Angular2. Он использует "@angular/common": "2.0.0-rc.4" и "@angular/router": "3.0.0-beta.2".

Моя проблема в том, что при использовании обновления браузера на некоторых страницах появляется сообщение об ошибке...

"Ресурс, который вы ищете, был удален, изменилось его имя или временно недоступен".

Это также происходит, если я попал в URL напрямую.

URL-адрес примера:... https://tilecasev2.azurewebsites.net/profile/therichmond

Однако, если вы просматриваете страницы через домашнюю страницу, они работают нормально, но только до обновления ( https://tilecasev2.azurewebsites.net/).

У меня есть ниже в моей голове index.html...

<base href="/">

Почему это происходит и как я могу это исправить?

Источник

2 ответа

Решение

HashLocationStrategy избегает проблемы путем включения # на всех ваших угловых маршрутах, но на самом деле это не исправить.

Чтобы угловые маршруты без хэшей работали в Azure так же, как в локальной среде разработки, вам просто нужно настроить IIS для перезаписи всех запросов как root. Это позволяет угловой обрабатывать маршрутизацию.

Для этого добавьте Web.config файл в корневую папку вашего сайта со следующим содержимым:

<configuration>
<system.webServer>
    <rewrite>
      <rules>
        <rule name="Main Rule" 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="/" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>
</configuration>
Источник

Если вы развертываете в одном и том же плане обслуживания приложений и angular, и API-проект, то это решение.

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

для получения более подробной информации обратитесь по этой ссылке https://less0.github.io/azure-angular-II/

Источник

Как указал Гюнтер HashLocationStrategy нужно было настроить.

Я следовал инструкциям в документации Angular2, и теперь все работает...

https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html

Источник
Другие вопросы по тегам