Angular-UI-路由器和IIS发布

Question

我试图让 Angular ui-route 在 IIS7 上部署后工作，但即使 URL 重写了 web.config 中的设置，它仍然无法工作与在 IIS express 中一样完美。

404状态总是被IIS拦截显示

404 - File or directory not found. The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.

但我的路由器可以很好地处理 404 重定向，并在使用 iis express 时正确加载模板。

Angular 配置

.config(["$stateProvider", "$locationProvider", "growlProvider", "$urlRouterProvider", function ($stateProvider, $locationProvider, growlProvider, $urlRouterProvider) {

    // UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
    // ------------------------------------------------------------------------------------------------------------
    // the known route, with missing '/' - let's create alias
    $urlRouterProvider.when("", "/");

    $stateProvider
        .state("home", {
            url: "/",
            templateUrl: urlbase + "/views/login",
            controller: "LoginCtrl"
        })
        .state("modal", {
            url: "/modal",
            templateUrl: urlbase + "/views/modal",
            controller: "ModalCtrl"
        })
        .state("about", {
            url: "/about",
            templateUrl: urlbase + "/views/about",
            controller: "AboutCtrl"
        })
        .state("index", {
            url: "/index",
            templateUrl: urlbase + "/views/index",
            controller: "IndexCtrl"
        })
        .state("login", {
            url: "/login",
            //layout: "basic",
            templateUrl: urlbase + "/views/login",
            controller: "LoginCtrl"
        })
        .state("404", {
            url: "{path:.*}",
            templateUrl: urlbase + "/views/404",
            controller: "Error404Ctrl"
        });

    $locationProvider.html5Mode(true);

    growlProvider.globalTimeToLive(3000);

}])

web.config 用于 url 重写

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Main Rule" 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>
  <staticContent>
    <clear />
    <mimeMap fileExtension=".xml" mimeType="text/x-cross-domain-policy" />
  </staticContent>
</system.webServer>

我是不是漏掉了什么？谢谢！

Answer 1

万一有人遇到类似问题，我在托管服务器上解决了这个问题，方法是使用 "execute a URL on this site" 选项添加专门针对 404 状态代码的自定义错误页面 URL。

Answer 2

开启html5Mode（$locationProvider.html5Mode(true)）就会出现这种情况。

Setting html5mode to true in an AngularJS application it removes the hash (#) prefix from the angular virtual urls, a side effect of this is that if you try to navigate directly to a deep link in your angular app or refresh an internal page you may get a 404 page not found error.

以下是我为解决此问题所做的工作。在我的 web.config 中，我刚刚添加了以下代码片段。它适用于 IIS 服务器和运行处于 Visual Studio 调试模式的应用程序。

<configuration>
    <system.webServer>
        <rewrite>
          <rules>
            <rule name="AngularJS" 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>
......other configurations ...
</configuration>

Angular-UI-路由器和IIS发布

Angular-UI-Router and IIS publishing

iis

routing

angularjs

angular-ui-router