web-dev-qa-db-ja.com

IIS直接URLが機能しない)でAngular2アプリをホストした後

Angular2アプリを開発しました。

'ngserve'を使用してangular-cliで実行している間は、正常に機能しています。

アプリをIIS 7.5でホストすると、問題なくアプリのルートを参照でき、作成されたアプリナビゲーションから他のビューに移動できます。

しかし、ユーザーが特定のルートまたはコンポーネントをターゲットにしているURLを読み込もうとすると、問題が発生します。

したがって、http:// serverurlに移動すると...index.htmlが読み込まれ、次に、index.htmlのナビゲーションリンクをクリックすると、ユーザーはhttp:// serverurl/route1/component1に移動します。

しかし、ユーザーがURLhttp:// serverurl/route1/component1に直接ブラウザのアドレスバーのhttp:// serverurl/route1/component1は、その要求をIISに送信しており、リソースが見つからないというエラーが返されます。

そして、URLがサーバーに存在しないことは理解しやすいです。それはangularurlです。理想的には、index.htmlをロードし、残りのURLをangularルーターに渡して、その/ route1/component1。これは「ngserve」では機能しますが、IIS7.5では機能しません。 IISで機能させるために必要な設定はありますか?または私がAnuglar2アプリでしなければならないことは何ですか?

誰かがこれを修正する方法を私に提案できますか?

9
microchip78

次の手順でこれを解決します。

  1. https://www.Microsoft.com/en-au/download/details.aspx?id=7435)からURL Rewriterモジュールをダウンロードしました

  2. 私のweb.configに以下を追加しました

<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>
</configuration>
  1. Index.htmlにベースタグを設定します。 <head>タグの直後にある必要があります
<base href="/"/>

これらの3つの手順により、Angular2/Angular Appwithhtml5modeurl onIIS7.5またはIIS 8.0

これがお役に立てば幸いです。これを解決するには、いくつかの答えを確認する必要があります。

23
microchip78

Angular 4.0およびIIS 6.1を使用すると、さらに簡単な変更が可能になりました。これにより、デフォルトのフォルダーや上記の書き換えの代わりに名前付きサイトを使用できるようになりました。 。ベースhrefを「/」からアプリフォルダーの名前に変更しました。

<head>
    <base href="MyApp">
...

これが他の人のために働くことを願っています!

1
Glinkot

[Windowsホスティング]テキストファイルを作成して「web.config」と呼びます。開いて以下のコンテンツを貼り付け、ホスティングのルートディレクトリにあることを確認します。

<?xml version="1.0" encoding="utf-8"?>
      <configuration>

      <system.webServer>
        <rewrite>
          <rules>
            <rule name="Angular 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="./index.html" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>

      </configuration>

BEST OF LUCK :)誰か他の人の時間を節約すると、やりがいがあります!

0
Nour Lababidi