web-dev-qa-db-ja.com

Angular 2 IISでホスト：HTTPエラー404

URLから特定のパラメーターを期待する1つのコンポーネントを持つシンプルなアプリがあります。アプリケーションには1つのルートのみがあります。

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

Index.htmlでは、ヘッダーにこれがあります<base href="/">

私はwebpackを使用しており、アプリケーションを開発環境で正常に実行します。URLを参照すると、http://localhost:4000/hero/1/1。

ただし、実稼働用のアプリを構築して配布ファイルを取得し、それをIISでホストする場合。同じURLを参照しようとすると、次のエラーが表示されます。

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

すべてのルーティングを削除して参照するだけで、アプリケーションは正常に動作します：http:localhost:4200 IISで。

angulariishttp-status-code-404angular2-routing
12
Hussein Salman

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

ステップ1：インストール IIS URL Rewrite モジュール

ステップ2：書き換えルールをweb.configに追加します

   <?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>
33
Hussein Salman

ステップ3： web.configリンクをangle.jsonに追加：（ngビルド後にスキップされるため）

"architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                         ..........
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            **"src/web.config"**
                        ]
1
ogaltsev

デフォルトのWebサイトの下でmyAppのようなIISアプリケーションを使用している場合（アプリケーションへの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/

1
Robert