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

Question

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

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

The steps on TeamCity are as below

Fetch latest code and do an npm install

Do a ng build so that the dist folder gets created and populated.

FTP upload the dist folder to azure app service

我正在使用以下版本

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 应用程序服务配置？

Answer 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"
  ],

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

Azure app service unable to load AngularJS5 app

angular

web-hosting

azure-app-service-envrmnt