首页 文章

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

提问于
浏览 次
23

我有一个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 （默认网址） .

有什么想改善刷新？ :)

angularjs azure angular angular2-routing

4 回答

  • 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/

    回复于
  • 3

    一个更简单的@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>
    回复于
  • 36

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

    • 将web.config添加到您的src文件夹 . 在我的情况下，root中的web.config没有解决问题 .

    • 像这样添加到你的 .angular-cli.json

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

    回复于
  • 6

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

    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

    回复于

相关问题