angular 2 azure deploy refresh 错误：您要查找的资源已被删除、名称已更改或暂时不可用答案

【问题标题】：angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailableangular 2 azure deploy refresh 错误：您要查找的资源已被删除、名称已更改或暂时不可用
【发布时间】：2016-10-29 12:16:54
【问题描述】：

我有一个实现了基本路由的 Angular 2 rc-2 应用程序。路径是 /path1，这是默认路径和 /path2。主路径 / 重定向到 /path1。当我在本地（lite-server）运行它时，一切正常。我设法将此应用程序部署到 Azure Web 应用程序。该应用程序可以正常工作，但是如果我在/path1 或/path2 中刷新页面，我会收到此错误：The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

一种可能的方法是实现 url 重写。我在我的项目中添加了一个 web.config 文件

<?xml version="1.0" encoding="UTF-8"?>

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
        <clear />

         <!-- check if its path1 url and navigate to default page -->
        <rule name="Path1 Request" enabled="true" stopProcessing="true">
        <match url="^path1" />
        <action type="Redirect" url="/index.html" logRewrittenUrl="true" />
        </rule>

         <!-- check if its path2 url and navigate to default page -->
        <rule name="Path2 Request" enabled="true" stopProcessing="true">
        <match url="^path2" />
        <action type="Redirect" url="/index.html" logRewrittenUrl="true" />
        </rule>

         </rules>
        </rewrite>
    </system.webServer>
</configuration>

在这种情况下，我可以进行刷新而不会收到此错误消息。但是任何刷新都会将我重定向到默认 URL。我从/path2 刷新，它会将我重定向到/path1（默认网址）。

有什么改进刷新的想法吗？ :)

【问题讨论】：

标签： angular azure angular2-routing

【解决方案1】：

您必须将 web.config 文件添加到您的根 Angular2 应用程序中。这就是 Azure 服务器（IIS 服务器）的工作原理。

我使用 webpack，所以我把它放在 src 文件夹中。部署时不要忘记将其复制到您的 dist 文件夹中。我使用 CopyWebpackPlugin 设置我的 webpack 来复制它。

这是 web.config 文件：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <clear />
                <rule name="Redirect to https" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
                </rule>
                <rule name="AngularJS 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>

它有两条规则：

第一条规则是将所有调用重定向到 https。如果您不使用 https，请将其删除。

第二条规则是解决你的问题。我在这里得到了第二条规则的参考（感谢来自 www.reddit.com 的用户 gravityaddiction）：

https://www.reddit.com/r/Angular2/comments/4sl719/moving_an_angular_2_app_to_a_real_server/

【讨论】：

在将重定向更改为 HTTP 后也为我工作，因为我没有为该站点使用 HTTPS
这是一个巨大的帮助。谢谢！我还删除了 HTTPS 重定向，但只是因为我们不允许 HTTP，所以 TCP 端口 80 甚至没有打开。
谢谢，但现在我有一个 404 来获取 /assets/i18n/en.json，如何使它工作？
向 Reddit 用户致敬！

【解决方案2】：

@Guilherme Teubl 方法的简单版本。这对我来说非常有效。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular4" 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>

【讨论】：

这对我很有用。此外，为了将 web.config 文件复制到 dist on ng build --prod，将“web.config”添加到 angular-cli.json 文件的资产中。我正在使用 Angular 5.2.9 和 CLI 1.7.3
@danfer，很高兴它对你有帮助。
@Uttam，我很高兴能帮上忙

【解决方案3】：

如果有人仍然坚持这一点，我想补充两点。

将 web.config 添加到您的 src 文件夹中。在我的情况下根目录中的 web.config 没有解决问题。
将其添加到您的 .angular-cli.json 喜欢这样

"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico", "web.config" ], ... } ],

【讨论】：

.angular-cli.json 变为 angular.json，供未来的访问者使用。
在角度 11 中：` "assets": [ "src/favicon.ico", "src/assets", "src/web.config" ],` src 文件夹中的 web.config 工作我。

【解决方案4】：

在新版本的 Angular 中，将配置路径添加到 angular.json 中，因为 angular.json 在 app 文件夹中，请务必使用 src/web.config 添加它

            "assets": [
          "src/assets",
          "src/web.config"
        ],

【讨论】：

【解决方案5】：

我也遇到了这个问题，并通过使用以下代码解决了这个错误：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
import { routing }       from './app.routes';
import {AgmCoreModule} from 'angular2-google-maps/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  imports: [ BrowserModule, FormsModule, routing, AgmCoreModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})

export class AppModule { }

您可以在此处了解有关 HashLocationStrategy 的更多信息： https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html

【讨论】：

我不建议这样做，因为它是使用 HashLocationStrategy 的解决方法。

【解决方案6】：

对于 azure web 应用上的 angular 10

在 assets 目录中创建 web.config（以防止 pwd 错误）并将其替换为 angular.json build

assets:
  "assets": [
              "src/favicon.ico",
              "src/assets",
              **{
                "glob": "web.config",
                "input": "src/assets/",
                "output": "/"
              }**
              
            ],

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <clear />
                <rule name="Redirect to https" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
                </rule>
                <rule name="AngularJS 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>

【讨论】：

【解决方案7】：

当用户点击导航栏时我遇到了这个问题

将 href=".... 替换为 routerLink="...

【讨论】：

【解决方案8】：

我遇到了一个问题，我的 angular.json 文件设置正确：

"assets": [
    "src/assets",
    "src/web.config"
],

但是web.config 文件没有被复制到构建的dist/ 文件夹中。

我没有想到我还在使用带有CopyPlugin 插件的自定义 webpack 配置文件 (extra-webpack.config.js)。一旦我将 web.config 路径添加到我的自定义 webpack 配置并重新构建我的项目，web.config 文件就在那里！

【讨论】：