部署到Azure时，Angular 2应用程序上的错误404

Question

我有一个角度为2的应用程序，其中一个简单的server.js作为node.js BE。

我已将我的应用程序部署到Azure，而我正在加载应用程序，并向我显示欢迎页面。

当我到达试图通过HTTP请求读取本地JSON的组件时，我收到404错误（我在本地环境中没有收到）。

读取json的代码如下：

private ReadFromJson(path: string): Observable<string[]> {
    return this._http.get(path)
        .map((response: Response) => <string[]>response.json())
        .do(data => console.log('All: ' + JSON.stringify(data)))
        .catch(this.handleError);
}

传递的实际路径是控制台中显示的路径。

我做了两件事：首先我确保该文件实际上是使用Azure CLI，并且它按预期存在。

其次，在查看了很多帖子后，我发现的唯一其他解决方案是按照建议的here添加MIME类型，但这对我来说也不起作用。

我真的很想帮助理解并解决问题，欢迎任何建议！

Answer 1

更新

如果您的应用只是前端（Angular）应用，那么您不再需要通过Node.js提供这些静态文件。因为默认情况下，Azure App Service已在其上安装了IIS，并且IIS可以通过执行某些配置来提供任何文件类型。因此，在这种情况下，您可以将web.config保持在下面，并将其放入＆＃34; site / wwwroot / dist ＆＃34;。

<?xml version="1.0" encoding="UTF-8" ?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
    </system.webServer>
</configuration>

当您在Azure App Service上部署Node.js时，它将使用iisnode托管您的应用，并且您可能有一个web.config文件，其内容与this link中的内容相似。

默认情况下，此配置文件假定/public文件夹中的静态文件。

<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
    <action type="Rewrite" url="public{REQUEST_URI}" />
</rule>

因此，将此添加到web.config后，

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>

请确保将静态文件放入/public文件。

Answer 2

上周我遇到了同样的问题，我想也许我应该分享我的发现，因为我按照需要开始工作。

我部署了使用angular cli开发的应用程序，并使用相同的方法构建。我将/ dist文件夹中的所有文件复制到azure并且添加了一个web.config （这是很多点击和试用）但我学会了重写规则for angular是必需的，它可以处理webpack捆绑资产而不返回404。

这是网络，配置，我相信它应该适合你：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.web>
    <httpRuntime maxQueryStringLength="32768" maxUrlLength="65536" />
  </system.web>
  <system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxQueryString="32768" />
      </requestFiltering>
    </security>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico|.svg|.eot|.woff|\​.woff2)).*$" />
          <conditions logicalGrouping="MatchAll"></conditions>
          <action type="Rewrite" url="/" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
    </staticContent>
  </system.webServer>
</configuration>
<!--

This is required for the app to work in Azure or an ASP.NET hosting environment because the woff files 
are not treated as static content on Azure as well as the routing breaks without the rewrite rule below 
and app or rather the server returns a 404.

-->

Answer 3

以下建议行之有效。

如果您的应用只是前端（Angular）应用，则您不再需要通过Node.js提供这些静态文件。因为默认情况下，Azure App Service已在其上安装IIS，并且IIS可以通过进行一些配置来服务任何文件类型。因此，在这种情况下，您只需保持web.config如下所示，然后将其放在“ site / wwwroot / dist”即可。

添加web.config起作用

感谢您提供出色的解决方案。