Angular 2 azure 배포 새로 고침 오류: 찾고 있는 리소스가 제거되었거나 이름이 변경되었거나 일시적으로 사용할 수 없습니다.
저는 기본 라우팅이 구현된 Angular 2 rc-2 앱을 가지고 있습니다.경로는/path1기본 경로입니다./path2홈패스/로 리디렉션/path1로컬(Lite-server)에서 실행하면 모든 것이 정상적으로 작동합니다.저는 이 앱을 Azure 웹 앱에 배포할 수 있었습니다.앱은 정상적으로 작동하지만 페이지를 새로 고치면 사용할 수 있습니다./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).
리프레쉬를 개선할 생각이 있습니까? :)
root Angular2 앱에 web.config 파일을 추가해야 합니다.이것이 Azure 서버(IIS Server)의 작동 방식입니다.
저는 웹팩을 사용하고 있어서 src 폴더에 올려놓았습니다.뎁로이를 할 때 dist 폴더에 복사하는 것을 잊지 마세요.CopyWebpackPlugin을 사용하여 웹 팩을 복사하도록 설정했습니다.
다음은 web.config 파일입니다.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<rule name="Redirect to https" stopProcessing="true">
<match url="(.*)" />
<conditions>
<add input="{HTTPS}" pattern="off" ignoreCase="true" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
</rule>
<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>
두 가지 규칙이 있습니다.
첫 번째 규칙은 모든 통화를 https로 리디렉션하는 것입니다.https를 사용하지 않으면 제거합니다.
두 번째 규칙은 문제를 해결하는 것입니다.여기서 두 번째 규칙에 대한 참조를 받았습니다(www.reddit.com 의 사용자 중력 중독 덕분).
https://www.reddit.com/r/Angular2/comments/4sl719/moving_an_angular_2_app_to_a_real_server/@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>
만약 누군가가 여전히 이것을 고수하고 있다면 저는 두 가지를 추가하고 싶습니다.
- src 폴더에 web.config를 추가합니다.저의 경우 루트에 web.config가 있으면 문제가 해결되지 않습니다.
에 추가합니다.
.angular-cli.json이와 같이"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico", "web.config" ], ... } ],
Angular의 새 버전에서는 angular.json에 구성 경로를 추가하고 angular.json이 app 폴더에 있으므로 src/web.config를 사용하여 구성 경로를 추가해야 합니다.
"assets": [
"src/assets",
"src/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 { }
HashLocation Strategy에 대한 자세한 내용은 https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html 에서 확인할 수 있습니다.
Zure 웹 앱의 각도 10에 대해
pwd 오류를 방지하기 위해 자산 디렉토리에 web.config를 만들고 이를 angular.json 빌드에 추가했습니다.
assets:
"assets": [
"src/favicon.ico",
"src/assets",
**{
"glob": "web.config",
"input": "src/assets/",
"output": "/"
}**
],
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<rule name="Redirect to https" stopProcessing="true">
<match url="(.*)" />
<conditions>
<add input="{HTTPS}" pattern="off" ignoreCase="true" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
</rule>
<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>
사용자가 탐색 모음을 클릭할 때 이 문제가 발생했습니다.
<a href="...를 <a routerLink="...로 대체합니다.
문제가 발생했습니다. 문제가 발생했습니다.angular.json파일이 올바르게 설정됨:
"assets": [
"src/assets",
"src/web.config"
],
러나그나web.config 파일로 복사되지 .dist/폴더를 누릅니다.
도 커스텀 구성 파일 config )을 .extra-webpack.config.js와 CopyPlugin플러그인일단 내가 추가했을 때web.config 웹 팩 및의 경로, 즉 " " " 사 지 팩 " 젝 " 트 " 로 " 프 " 구 " 재 " 축 " 자 " 용 " 및 " 정 " 웹 " 로 " 경 " 구 " 의 " 성 " ▁path " pack " ▁to "web.config파일이 있었습니다!
언급URL : https://stackoverflow.com/questions/38054707/angular-2-azure-deploy-refresh-error-the-resource-you-are-looking-for-has-been
'programing' 카테고리의 다른 글
| 서로 다른 두 분기의 파일을 비교하는 방법 (0) | 2023.05.04 |
|---|---|
| 에서 응용 프로그램의 경로를 가져오려면 어떻게 해야 합니까?NET 콘솔 애플리케이션? (0) | 2023.05.04 |
| ABC를 사용하는 것과 ABC를 사용하는 것 사이에 차이점이 있습니까? (0) | 2023.05.04 |
| React Native를 사용할 때 데이터를 저장하기 위한 옵션은 무엇입니까? (iOS 및 Android) (0) | 2023.05.04 |
| 스택 생성 날짜 가져오기 (0) | 2023.05.04 |