尝试将Angular 7应用程序部署到Azure失败

Question

我正在尝试将我的应用程序的更新版本部署到Azure。我已经部署了Angular 4版本（使用原始CLI 1.2.7创建）。由于种种原因，我不记得我决定使用Angular CLI版本7.3.4创建一个新项目，以“升级”到Angular7。

我首先意识到，当我尝试在现有WebApps部署中链接新项目github时，可能会遇到问题，但是当失败时，我想我会在独立版本中进行尝试，这样就不会打扰用户。 / p>

我可以在部署中心中成功部署该应用程序，但是当我浏览到该站点时，出现此错误：

  

您无权查看此目录或页面。

提醒我，我需要按照Angular guidelines的要求安装Web.Config文件：

//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>

自然，我也尝试过，并且得到相同的结果。

当我检查工作应用程序的文件夹结构并将其与新应用程序进行比较时，我认为这就是问题所在。由于我所有的角度文件和web.config都存储在** dist {APP Name} **中，但是在我的工作应用程序中，所有文件都存储在wwwroot文件夹中。

新应用

旧的工作应用

关于如何解决此问题的任何想法，是否可以编写一个应用程序设置来告诉Azure在哪里寻找文件？

预先感谢

Answer 1

首先，您需要将“ dist”文件夹导出并部署到您的App Service。文件夹“ dist”足以启动您的Angular应用程序。

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

它将创建dist文件夹并将dist文件夹复制到wwwroot \ yourappname。我相信您可能需要index.html，index.htm或类似的页面来引导您的应用程序。

尝试让我们知道。