Angular 2基本ルーティングが実装されたrc-2アプリがあります。パスは、デフォルトパスである/path1
と/path2
です。ホームパス/
は/path1
にリダイレクトされます。 -server)すべて正常に動作します。このアプリをAzure Webアプリに展開できました。アプリは正常に動作しますが、/path1
または/path2
でページを更新すると、このエラーが発生します:The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
可能なアプローチは、URL書き換えを実装することです。プロジェクトにweb.configファイルを追加しました
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<!-- check if its path1 url and navigate to default page -->
<rule name="Path1 Request" enabled="true" stopProcessing="true">
<match url="^path1" />
<action type="Redirect" url="/index.html" logRewrittenUrl="true" />
</rule>
<!-- check if its path2 url and navigate to default page -->
<rule name="Path2 Request" enabled="true" stopProcessing="true">
<match url="^path2" />
<action type="Redirect" url="/index.html" logRewrittenUrl="true" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
この場合、このエラーメッセージを表示せずに更新できますが、更新するとデフォルトのURLにリダイレクトされます。 /path2
から更新すると、/path1
(デフォルトのURL)にリダイレクトされます。
リフレッシュを改善するための考えはありますか? :)
@Guilherme Teublのメソッドのより単純なバージョン。これは私にとって完璧に機能しました。
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular4" 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>
誰かがまだこれで立ち往生している場合、私は2つのものを追加したいと思います。
.angular-cli.json
に追加します
"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico", "web.config" ], ... } ],
また、この問題に直面し、次のコードを使用してこのエラーを回避しました。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { routing } from './app.routes';
import {AgmCoreModule} from 'angular2-google-maps/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
@NgModule({
imports: [ BrowserModule, FormsModule, routing, AgmCoreModule.forRoot() ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
export class AppModule { }
HashLocationStrategyの詳細については、こちらをご覧ください: https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html