приложение angular 7 не работает при обновлении на уровне маршрута после хостинга в Azure

Question

В нашей команде мы разработали приложение angular7 и размещаем на Azure.веб-сайт работает нормально с обновлением или без него, когда URL-адрес равен http://xyz.azurewebsites.net/.. Я могу просматривать страницы, нажимая на ссылки без проблем.Например, можно просматривать страницы, например http://xyz.azurewebsites.net/page1,, но на этот раз, когда я обновляю / нажимаю ctrl f5 в браузере, он показывает: ресурс, который вы ищете, был удален, изменилось его имя иливременно недоступен.

Я гуглил и попробовал немного поработать, как показано ниже:

1. Создал файл web.config для перезаписи URL и поместил его в папку src углового приложения, добавилweb.config в

"assets": ["src / favicon.ico", "src / assets", "src / web.config"],

внутри угловогоФайл .json, но закончился вены.

Создал файл web.config для перезаписи URL и поместил его в корень углового приложения, добавил web.config в

"assets": ["src / favicon.ico", "src / assets", "web.config"],

внутри файла angular.json, но закончились вены.

Попытка размещения / без размещения файла web.config в папке dist (после создания dist с помощью команды ng build --prod), но завершившейся вены.

Пробовал сдва разных содержимого в web.config, как показано ниже:

Первое:

<?xml version="1.0"?>

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
            <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
        </staticContent>
    </system.webServer>
    <system.webServer>
    <rewrite>
        <rules>
            <rule name="angular cli 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="/" />
                </rule>
            </rules>
        </rewrite>
      </system.webServer>
    </configuration>

и второе:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="angular cli 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="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Но закончилось вены.

в моем случае <base href="/"> в index.html в папках dist и src углового приложения.Что еще можно попробовать, чтобы решить эту проблему?

Answer 1

Наконец-то сработало, я просто поместил web.config в папку src и записал путь к этому файлу в angular.json, как показано ниже:

"assets": [ "src/favicon.ico", "src/assets", "src/web.config" ]

И затем зафиксировал в Azure.Хоть я и раньше делал то же самое, но в конце концов это сработало !!!

Спасибо

Answer 2

проблема может заключаться в том, что файл web.config должен находиться в корне папки wwwroot, а не в исходном текстовом приложении.Вы можете проверить это с помощью расширенных инструментов при просмотре ресурса службы приложения.нажмите go от передовых инструментов, и это перенаправит вас в сервисы Kudu.Вы можете использовать консоль отладки, чтобы увидеть все ваши файлы.

Альтернативой является помещение вашего углового / удаленного содержимого в учетную запись хранения и использование прокси-функции Azure для обработки перенаправлений.Если это работает для ваших требований, здесь есть дополнительная информация: https://markheath.net/post/static-websites-azure-blob-storage-functions-proxies