Question

我有一个Angular 2 rc-2应用程序，实现了基本路由。路径为/path1，这是默认路径/path2。主路径/重定向到{{1 }}。当我在本地运行它（lite-server）时一切正常。我设法将此应用程序部署到Azure Web应用程序。如果我在/path1或/path1时刷新页面，该应用可以正常运行但我收到此错误：/path2

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

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

在这种情况下，我可以刷新而不会收到此错误消息。但是任何刷新都会将我重定向到默认网址。我从<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <clear />  <rule name="Path1 Request" enabled="true" stopProcessing="true"> <match url="^path1" /> <action type="Redirect" url="/index.html" logRewrittenUrl="true" /> </rule>  <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>刷新，然后将其重定向到/path2（默认网址）。

有什么想改善刷新？：）

Answer 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，请将其删除。

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

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

Answer 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>

Answer 3

如果有人仍然坚持这个我想添加两件事。

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

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

Answer 4

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

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

Answer 5

在新版本的angular中，将配置路径添加到angular.json，并且由于angular.json在app文件夹中，请确保使用src / web.config添加它。

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

Answer 6

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

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

但是没有将web.config文件复制到内置的dist/文件夹中。

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

Answer 7

对于 azure web 应用程序上的 angular 10

在 assets 目录中创建 web.config（以防止 pwd 错误）并将其添加到 angular.json 构建中

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>

Answer 8

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

<块引用>

用 routerLink="...

替换了 href="....

angular 2 azure deploy refresh error：您要查找的资源已被删除，名称已更改或暂时不可用

8 个答案: