Блог

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

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

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

«активы»: [ «src / favicon.ico», «src / assets», «src /web.config» ],

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

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

«активы»: [ «src / favicon.ico», «src / assets», «web.config» ],

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

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

4. Пробовал с двумя разными содержимым в 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 приложения angular. Что еще можно попробовать для решения этой проблемы?

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

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

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

Спасибо

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

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