VS2015 Web開発環境でAngularJS SPAが正しく更新されるようにするにはどうすればいいですか？

Question

Visual Studio 2015を使用して開発したAngularJS SPAアプリケーションがあります。しかし、私がページにいて、リフレッシュをクリックすると、example.com/home/aboutのようなSPAページのリフレッシュを試みます。私はhome/aboutページを持っていないので、これは失敗します。

web.configファイル（ローカルテスト用）を変更して実際にindex.html（load up）に移動してから/ home/aboutステートに移動する方法はありますか？

<configuration> 
    <system.web> 
    <compilation debug="true" targetFramework="4.5" /> 
    <httpRuntime targetFramework="4.5" /> 
    </system.web> 
</configuration> 

Answer 1

あなたがhtml5modeを使用しているようだ：

は、ここに私の現在のweb.configファイルです。この場合、URLがサーバーからの要求に変わるのを防ぐために、#はありません。 この設定では、サーバーのヘルプが必要です。 SPAルートからのリクエストを受信すると、index.htmlが配信されます。

このSO answerは、web.configファイルにURL書き換えの設定の詳細を持っています

ルールで行く：、それが見つかったことを/apiおよび任意のディレクトリやファイルのために：

<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" /> 
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
      </conditions> 
      <action type="Rewrite" url="/" /> 
     </rule> 
     </rules> 
    </rewrite> 
    </system.webServer> 

それはあなたのAPIが下にあると仮定しそれはそのままの状態で提供されます。 他のものは/に書き換えられ、のデフォルト文書がindex.htmlに設定されているとSPAがロードされます。

はまた、あなたは、IIS（IIS Express doesn't need the module）

別のオプションは、これらの軽量HTTPサーバのNPMパッケージの一つであるためURL Rewrite moduleをインストールする必要があります注意してください。 John Papa has one: lite-server。これは、ボンネットの下BrowserSyncを使用しています。

BrowserSyncたちは超高速軽量 開発サーバに何をしたいのほとんどを行います。静的コンテンツを提供し、変更を検出し、 がブラウザを更新し、多くのカスタマイズを提供します。

SPAを作成する場合、ブラウザには、 ブラウザにのみ知られているルートがあります。たとえば、/ customer/21は 角型アプリのクライアント側のルートです。このルートが手動で入力されている場合や、Angularアプリ（別名ディープリンク）のエントリポイントとして直接 にリンクされている場合は、Angularがまだロードされていないため、静的な サーバがリクエストを受け取ります。 サーバーは経路の一致を検出せず、したがって404を返します。 この場合の望ましい動作は、index.html（または定義済みのアプリの開始ページ）を返すことです。 BrowserSyncは にフォールバックページを自動的に許可しません。しかし、それは カスタムミドルウェアを許可します。これは、lite-serverが入る場所です。

lite-serverは、 をSPAに簡単に対応させるために、BrowserSyncの周りに簡単にカスタマイズされたラッパーです。