尝试将Angular 7应用程序部署到Azure是不成功的

Question

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

我第一次意识到，当我尝试在现有的WebApps部署中链接新项目github时，我可能会遇到问题，但是当我失败时，我想我会在独立版本中尝试它，所以我不会打扰用户。

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

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

这提醒我，我需要根据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或类似页面来引导您的应用程序。

试试让我们知道。