Блог

Я пытаюсь развернуть обновленную версию моего приложения в Azure. У меня уже развернута версия Angular 4 (созданная с помощью оригинального CLI 1.2.7). По причинам, которые я не могу вспомнить, я решил создать новый проект с Angular CLI версии 7.3.4 для «обновления» до Angular 7.

Впервые я понял, что у меня может возникнуть проблема, когда я попытался связать новые проекты с github в моем существующем развертывании WebApps, но когда это не удалось, я решил попробовать это в автономной версии, чтобы не беспокоить пользователей.

Я могу успешно развернуть приложение в Центре развертывания, но при переходе на сайт я получаю эту ошибку:

У вас нет разрешения на просмотр этого каталога или страницы.

Это напомнило мне, что мне нужен файл Web.Config в соответствии с рекомендациями Angular:

 //NEW APP 
<configuration>
  <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>
</configuration>
  

Это похоже, но не совпадает с файлом web.config, который у меня есть в моей рабочей версии:

 //OLD WORKING APP
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
          <conditions logicalGrouping="MatchAll">
          </conditions>
          <action type="Rewrite" url="/"  appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>
  

Естественно, я тоже пробовал это, и я получаю тот же результат.

Когда я проверяю структуру папок моего рабочего приложения и сравниваю его с новым приложением, я думаю, что именно в этом заключается проблема. Поскольку все мои файлы angular и мой web.config хранятся в ** dist{название приложения} ** но в моем рабочем приложении все файлы хранятся в папке wwwroot.

Новое приложение

Старое рабочее приложение

Есть идеи о том, как я могу это исправить, есть ли настройка приложения, которую я могу написать, чтобы указать Azure, где искать файлы?

Заранее спасибо

Во-первых, вам необходимо экспортировать и развернуть папку ‘dist’ в вашей службе приложений. Папки ‘dist’ достаточно для запуска вашего приложения Angular.

 ng build --base-href "/yourappname/" --prod
  

Создается папка dist и копируется папка dist в wwwroot yourappname. Я считаю, что вам может понадобиться index.html, index.htm или аналогичные страницы для начальной загрузки вашего приложения.

Попробуйте и дайте нам знать.