2017-05-04 10 views
3

URLから特定のパラメータを必要とする1つのコンポーネントを持つ単純なアプリケーションがあります。アプリケーション内の唯一のルートがあります:Index.htmlとで角2 IISでホストされています:HTTPエラー404

const appRoutes: Routes = 
         path: 'hero/:userId/:languageId',component: HeroWidgetComponent }]; 

が、私は、ヘッダーに<base href="/">

これを持って、私はWebPACKのを使用していますが、URLをブラウズするときに、アプリケーションは、開発環境で正常に動作します:http://localhost:4000/hero/1/1

しかし、本番用のアプリケーションをビルドし、配布ファイルを入手する場合は、IISでそのファイルをホストしてください。同じURLを閲覧しようとすると、私は次のエラーを取得する:IISでhttp:localhost:4200を:私はすべてのルーティングを削除し、単に閲覧する場合

HTTP Error 404.0 - Not Found 
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable. 

アプリケーションが正常に動作します。

+1

あなた 'IIS'サーバは、すべての角度のルートが' index.html'(または角度アプリhtmlファイルにリダイレクトされるように適切に設定する必要がありますからトリガーされる)。残念なことに私は 'IIS'のサーバーエキスパートではありませんので、正確に行う方法について本当の答えを与えることはできません。 – tftd

答えて

6

書き換えルールを追加してIISをindex.htmlにフォールバックさせる必要があります。

ステップ1:あなたがmyAppあなたのデフォルトの下のようなIISアプリケーションを使用している場合 が

<?xml version="1.0" encoding="utf-8"?> 
    <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> 
+0

私はGodaddyでホスティングしています。私はこれに従いましたが、IIS URL書き換えをインストールする必要はなく、うまくいきました。 – mapussah

+0

@mapussah、おそらくこのモジュールが既にインストールされているためです。 – Coding

+0

こんにちは、私は同じ手順を踏襲しますが、私のローカルIiSでは404エラーになります。私は答えの中の指定されたリンクからURLリライトをダウンロードしました。実行後、すでにインストールされています。私が紛失しているものを共有してもらえますか? Angular 4、@ Anger/Cli、C#Web API、VS 2015を使ってアプリケーションを開発しました。 –

0

をweb.configのために書き換えルールを追加します。 IIS URL Rewriteモジュール

ステップ2をインストールします。 (アプリケーションのURLはhttp://localhost/myApp/my-angular-routeの構文を持つ必要があります)、アクションを

に変更してください
<action type="Rewrite" url="/myApp/"/>; 

それは私の環境で問題なく動作します。順を追って説明

ステップは、ここで見つけることができます: https://blogs.msdn.microsoft.com/premier_developer/2017/06/14/tips-for-running-an-angular-app-in-iis/

関連する問題