Azure 应用服务无法加载 AngularJS5 应用答案

【问题标题】：Azure app service unable to load AngularJS5 appAzure 应用服务无法加载 AngularJS5 应用
【发布时间】：2018-01-14 17:09:41
【问题描述】：

我正在尝试使用 FTP 上传通过 TeamCity 将 AngularJS 网站（dist 文件夹）发布到 Azure。这些文件似乎没问题，并且它们正在正确上传。应用服务正在运行。

但我在浏览网站时只能看到 azure app 服务的登录页面。 Website link供您参考。

TeamCity 上的步骤如下

获取最新代码并执行npm install

执行ng build 以便创建和填充 dist 文件夹。

FTP 将 dist 文件夹上传到 azure app 服务

我正在使用以下版本

Angular CLI: 1.6.0
Node: 8.9.3
OS: win32 x64
Angular: 5.1.1
@angular/cli: 1.6.0
@angular/language-service: 4.4.6
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

我还添加了一个网络配置，以查看是否可以解决任何问题，但无济于事。我的网络配置如下所示：

<?xml version="1.0"?>
<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>

即使我尝试手动进行 FTP 上传，它仍然是我看到的登录页面。我尝试浏览到/index 页面，但我得到资源不存在。我是否缺少托管 Angular 应用所需的一些 azure 应用服务配置？

【问题讨论】：

标签： angular web-hosting azure-app-service-envrmnt

【解决方案1】：

通过将web.config 更改为以下内容来解决此问题。我可能错过了match url 标签的正确regex。

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="redirect all reqi=uests" stopProcessing="true">
                    <match url="^(.*)$" ignoreCase="false"/>
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" pattern="" ignoreCase="false" />
                    </conditions>
                    <action type="Rewrite" url="/" appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

然后将以下内容添加到angular-cli.json。这将在构建时自动将 Web 配置包含在 dist 文件夹中。

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

【讨论】：