私は簡単なangle2-cliアプリを持っています(モデル駆動型の1ページ-ルーターは関係ありません)。 「ng serve」を使用すると、すべて正常に機能します。 ng build --productで製品版を作成しました。すべての./distフォルダーの内容をC:\ inetpub\wwwrootの下の新しいフォルダーにコピーしました。 IIS管理コンソールから仮想アプリを作成しました。デフォルトのアプリファイルはindex.htmlです。アプリuriを参照すると、「読み込み中...」のページのみが表示されます。 --productスイッチなしでビルドを試みます(ngビルドのみ)が、結果は同じです。 Angularアプリがロードされていません。 IISでangularアプリを公開するために必要なものは他にありますか?
この状況を解決する方法は次のとおりです。
ng build
を使用してアプリケーションを構築しますdist
フォルダーを表示しますbase href
を/
から/yourAliasNameOnIIS
に設定しますこのweb.configを使用して、リクエストをindex.htmlページにリダイレクトします
<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="/yourAliasNameOnIIS" />
</rule>
</rules>
</rewrite>
仮想ディレクトリをWebアプリケーションに変換します
ng build --deploy-url "/yourAliasNameOnIIS"
を使用して、dist/index.html
のsrcパスを変更することもできます。
私はそれが役立つことを願っています!
ブラウザの開発ツールを開くと、アプリがjs、cssなどのファイルをダウンロードしようとしたときに404メッセージが表示されます。
Index.htmlでbase hrefを設定する必要があります
<base href="./">
これにより、ベースrefがIISのWebサイトの場所に関連するようになります。そうでない場合は、ハッシュロケーション戦略も使用する必要があります。そうでない場合、IISはng2ルーターURLの変更をインターセプトし、URLのコントローラー/アクションを見つけようとします。
app.module.tsのインポートの下:
RouterModule.forRoot(routerConfig, { useHash: true })
これらの2つの手順を完了しましたが、すべてIISでAzure VMで完全に動作しています。また、この方法で行うと、SPAをルートに配置する必要がなく、複数のSPAを(IISの異なるWebサイトで)隣り合わせに実行することができます。
私にとって、それは非常に簡単でした:
これにより、さらに簡単になります。index.htmlファイルを変更する必要はありません。
ng build -prod --base-href
私は多くの提案を参照しましたが、私のために働いたのはこれでした link
Angularアプリで別の方法で物事を構成する必要がある理由については、ここで明確に説明されています。リンクの手順に従って、公開されたファイルフォルダーの場所に以下の設定でweb.configを追加しました。
<?xml version="1.0"?>
<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" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
設定は上記のリンクでも説明されています。これが誰かを助けることを願っています。
私はそれが機能する以下のアプローチを試しました。
以下のように、Web.configファイルなしで展開できます。
index.html
は、その中のdistフォルダーでbase href
タグを見つけることができます
これに応じてパスを変更します
例-wwwroot内に展開する場合
<base href="/">
例:wwwrootのフォルダー内に展開する場合
<base href="/FolderName/">
angular i18nを使用する場合は、言語ごとにアプリを構築し、それらを別々のフォルダーに配置する必要があります
ng build --output-path=dist/fr --prod --bh /fr/
ng build --output-path=dist/en --prod --bh /en/
ここにiisの設定があります
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<directoryBrowse enabled="true" />
<rewrite>
<rules>
<rule name="Imported Rule 1" stopProcessing="true">
<match url="^../index\.html$" ignoreCase="false" />
<action type="None" />
</rule>
<rule name="Imported Rule 2" stopProcessing="true">
<match url="(..)" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
</conditions>
<action type="Rewrite" url="{R:1}/index.html" />
</rule>
<rule name="Imported Rule 3">
<match url="^$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^fr" />
</conditions>
<action type="Redirect" url="/fr/" redirectType="Found" />
</rule>
<rule name="Imported Rule 5">
<match url="^$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^es" negate="true" />
</conditions>
<action type="Redirect" url="/en/" redirectType="Found" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Ulubeynの答えがほとんど私のために働いたのに加えて、有効にするために独自のIIS書き換えルールを追加しました:
1)/ distからエイリアスへの初期リダイレクト2)エイリアスからのJavaScriptのダウンロードおよび3)エイリアスのAngularルーティング
<rules>
<rule name="Redirect from blank URL to IIS Alias" stopProcessing="true">
<match url="^/?$" />
<action type="Rewrite" url="/MyDist" />
</rule>
<rule name="Redirect from /dist folder to IIS Alias" stopProcessing="true">
<match url="^(.*)/dist" />
<action type="Rewrite" url="/yourAliasNameOnIIS" />
</rule>
<rule name="Allow Angular URL Routing on IIS Alias" stopProcessing="true">
<match url="^yourAliasNameOnIIS/*" />
<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="/yourAliasNameOnIIS" />
</rule>
<rule name="Redirect to IIS Alias folder with parameters" 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="/yourAliasNameOnIIS/{R:1}" appendQueryString="true" />
</rule>
</rules>
web.configの場所app/src /コンテンツに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>
.angular-cli.jsonで、web.configを次のようにアセットセクションに追加します。
"assets": [
"assets",
"favicon.ico",
"web.config"
],