Angular2ルーティングがIIS 7.5で動作するようにする

Question

私はAngular2を学んでいます。ルーティングは、nodejs lite-serverで動作しているときに正常に動作します。私はメイン（localhost：3000）のページに移動し、アプリケーションを移動することができます。 localhost：3000/employeeと入力して、要求されたページに移動します。

このアプリケーションは、最終的にWindows IIS 7.5サーバーにインストールされます。メインページ（localhost：2500）から始めると、ルーティングがうまく動作し、問題が発生してもアプリケーションを移動することができます。私が問題に遭遇するところは、メインランディングページ以外のページ（localhost：2500/employee）に直接行きたいときです。私はHTTPエラー404.0を取得します。

ルーティングを処理するapp.componentファイルは次のとおりです。

import { Component } from '@angular/core'; 
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; 
import { HTTP_PROVIDERS } from '@angular/http'; 

import { UserService } from './services/users/user.service'; 
import { LogonComponent } from './components/logon/logon.component'; 
import { EmployeeComponent } from './components/employee/employee.component'; 


@Component({ 
    selector : 'opi-app', 
    templateUrl : 'app/app.component.html', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS, UserService, HTTP_PROVIDERS] 
}) 

@RouteConfig([ 
    { 
     path: '/', 
     name: 'Logon', 
     component: LogonComponent, 
     useAsDefault: true 
    }, 
    { 
     path: '/employee', 
     name: 'Employee', 
     component: EmployeeComponent 
    } 
]) 

export class AppComponent { } 

私はこの問題を理解しています。 IISは/ employeeのディレクトリを探していますが、存在しません。私はちょうどIISがルーティングを認識するようにする方法を知らない。

Answer 1

これを達成するにはURL rewrite moduleを使用する必要があります。それを使用する方法に関する非常に詳細な情報が提供されています。here

IIS 8で私のために働いたサンプルweb.configスニペットはhereです。

Answer 2

URL書き換えモジュールを使用すると、アプリケーション内のルーティングパスが強制終了されます。私はindex.htmlファイルに404 Not Foundレスポンスのエラーページを変更しました。ブラウザのURLは変更されませんが、サーバーはアプリケーション全体を返します。

HowTo：サイト - >アプリケーション - >エラーステータスコード404のコンテキストメニューから[編集]を選択し、このサイトの[URLを実行]オプションを選択します。 /index.htmlと入力し、[OK]を押します。パスはサイトルートからのものなので、アプリパスを含める必要があります。

Answer 3

（角2、角4の場合）

前述の記事のようにweb.configファイルを作成します。

<configuration> 
    <system.webServer> 
    <rewrite> 
     <rules> 
     <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> 

サイトのルートディレクトリ（index.htmlと同じ）に配置します。私のものはdistフォルダ（angular-cliプロジェクト）にあります。

デプロイ後、アクセス権がある場合はIISにアクセスし、書き換えルールのアイコンをクリックしてこの設定を読み込むことができます。書き換えルールのアイコンとアイコンが表示されない場合は、モジュールを[modules]アイコンで有効にする必要があります。このコードスニペットは書かれていませんでしたが、より詳細な実装の詳細を共有したいと考えていました。