Angular 2.0 라우터가 브라우저를 다시 로드하는 데 작동하지 않음
Angular 2.0.0-alpha.30 버전을 사용하고 있습니다.다른 경로로 리디렉션할 경우 브라우저를 새로 고치고 "Cannot GET/route"로 표시됩니다.
이 오류가 발생한 이유를 파악하는 것을 도와줄 수 있습니까?
현재 표시된 오류는 존재하지 않는 http://localhost/route를 요청하고 있기 때문입니다.사이먼에 따르면.
html5 라우팅을 사용할 때는 앱의 모든 경로(현재 404)를 서버 측의 index.html에 매핑해야 합니다.다음은 몇 가지 옵션입니다.
라이브 서버 사용: https://www.npmjs.com/package/live-server
$live-server --entry-file=index.html`nginx 사용: http://nginx.org/en/docs/beginners_guide.html
error_page 404 /index.htmlTomcat - web.xml의 구성입니다.쿠닌의 댓글에서.
<error-page> <error-code>404</error-code> <location>/index.html</location> </error-page>
고지 사항: 이 수정 사항은 Alpha44와 함께 작동합니다.
저도 같은 문제가 있었고 Angular.io API Preview에 나와 있는 HashLocation Strategy를 구현하여 해결했습니다.
https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html
필요한 지시사항 가져오기로 시작
import {provide} from 'angular2/angular2';
import {
ROUTER_PROVIDERS,
LocationStrategy,
HashLocationStrategy
} from 'angular2/router';
그리고 마지막으로, 그렇게 모든 것을 함께 부트스트랩합니다.
bootstrap(AppCmp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
경로는 http://localhost/#/route로 나타나고 새로 고침하면 해당 위치에서 다시 로드됩니다.
으로 HTML5 state (Angular 기는로본으상 HTML5 태시푸적()를 합니다.PathLocationStrategy앵귤러 비속어로).
합니다.index.html 또로전 니다합환는으로 합니다.HashLocationStrategy(경로 URL에 # 포함) https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html
참고 항목: https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/
로 전환하는 방법HashLocationStrategy사용하다
>= RC.5 및 2.0.0 최종 업데이트
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
@NgModule({
declarations: [AppCmp],
bootstrap: [AppCmp],
imports: [BrowserModule, routes],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
]);
는더 짧게또로 .useHash
imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), ...
필요한 모든 가져오기가 있는지 확인합니다.
새 (RC.3) 라우터의 경우
<base href=".">
404도 유발할 수 있습니다.
대신 필요합니다.
<base href="/">
>= RC.x에 대한 업데이트
bootstrap(AppCmp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
// or since RC.2
{provide: LocationStrategy, useClass: HashLocationStrategy}
]);
import {provide} from '@angular/core';
import {
PlatformLocation,
Location,
LocationStrategy,
HashLocationStrategy,
PathLocationStrategy,
APP_BASE_HREF}
from '@angular/common';
>= 베타.16에 대한 업데이트가 변경되었습니다.
import {BrowserPlatformLocation} from '@angular/platform-browser';
import {provide} from 'angular2/core';
import {
// PlatformLocation,
// Location,
LocationStrategy,
HashLocationStrategy,
// PathLocationStrategy,
APP_BASE_HREF}
from 'angular2/router';
import {BrowserPlatformLocation} from 'angular2/src/router/location/browser_platform_location';
< 베타.16
import {provide} from 'angular2/core';
import {
HashLocationStrategy
LocationStrategy,
ROUTER_PROVIDERS,
} from 'angular2/router';
자세한 내용은 https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26 를 참조하십시오.
당신이 보고 있는 오류는 존재하지 않는 http://localhost/route를 요청하고 있기 때문인 것 같습니다.서버가 모든 요청을 주 index.html 페이지에 매핑해야 합니다.
Angular 2는 URL 끝에 해시를 사용하지 않고 기본적으로 html5 라우팅을 사용하므로 페이지 새로 고침은 다른 리소스에 대한 요청처럼 보입니다.
이것은 기본 HTML 위치 전략을 사용하는 경우 모든 라우터 버전에서 일반적인 상황입니다.
입니다. 를 들어, "" "" "" "" "" "" "" ""와 같은 URL입니다.http://localhost/route.
바에서 키를 서버로 되는 실제 . Enter 키입니다.route.
파일이 되지 않았기 Found를 합니다. 가 " 에버이와파일없록제도, 고을응답서에버공하하처다서같요않은니청리것습았"를 찾을 수 없기 때문입니다. 따라서 서버는 404 Not Found를 반환합니다. 왜냐하면 서버가 다음 파일을 찾을 수 없기 때문입니다.routejava.
우리가 원하는 것은 서버가 반환하는 것입니다.index.html단일 페이지 응용프로그램을 포함하는 파일입니다.그런 다음 라우터가 시동을 걸고 다음을 처리해야 합니다./routeURL을 지정하고 매핑된 구성 요소를 표시합니다.
이 .index.html(단일 페이지 응용프로그램 파일 이름으로 가정) 404 Not Found(찾을 수 없음)가 아닌 요청을 처리할 수 있습니다.
이 작업을 수행하는 방법은 사용 중인 서버 측 기술에 따라 달라집니다.예를 들어 Java의 경우 서블릿을 작성해야 할 수도 있으며, 레일에서는 다르게 작성됩니다.
구체적인 예를 들어, NodeJs를 사용하는 경우 다음과 같은 미들웨어를 작성해야 합니다.
function sendSpaFileIfUnmatched(req,res) {
res.sendFile("index.html", { root: '.' });
}
그런 다음 미들웨어 체인의 맨 끝에 등록합니다.
app.use(sendSpaFileIfUnmatched);
이것은 도움이 될 것입니다.index.html404를 반환하는 대신 라우터가 시동을 걸 것이고 모든 것이 예상대로 작동합니다.
이것이 인덱스의 헤드 요소에 있는지 확인합니다.html:
<base href="/">
Angular2 Routing & Navigation 설명서의 예제에서는 대신 다음 코드를 머리에 사용합니다(설명서의 실시간 예제 노트에서 이유를 설명합니다).
<script>document.write('<base href="' + document.location + '" />');</script>
페이지를 새로 고치면 기본 href가 현재 document.location으로 동적으로 설정됩니다.저는 이것이 문서를 훑어보고 플랭크를 복제하려는 사람들에게 약간의 혼란을 야기하는 것을 볼 수 있었습니다.
index.html에 대한 모든 요청을 처리하도록 AppServer를 구성하지 않고 브라우저에 URL을 입력할 수 있으려면 HashLocationStrategy를 사용해야 합니다.
가장 쉬운 구성 방법은 다음과 같습니다.
RouterModule.forRoot(routes, { useHash: true })
다음 대신:
RouterModule.forRoot(routes)
HashLocationStrategy를 사용하면 URL은 다음과 같습니다.
http://server:port/#/path
저도 webpack-dev-server를 사용할 때 같은 문제가 있었습니다.웹 팩에 devServer 옵션을 추가해야 했습니다.
솔루션:
// in webpack
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
또는 Apache Nginx 파일을 ..htaccess되지 않은 " Engine("On" Rewrite Engine") 및 "On" Rewrite Engine
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html
제 서버는 Apache인데, 새로 고침이나 딥 링크를 할 때 404를 고치기 위해 한 것은 매우 간단합니다.Apache vhost 구성에서 한 줄만 추가합니다.
ErrorDocument 404 /index.html
따라서 404 오류는 index.html로 리디렉션되며, 이는 angular2 라우팅이 원하는 것입니다.
전체 vhost 파일 예:
<VirtualHost *:80>
ServerName fenz.niwa.local
DirectoryIndex index.html
ErrorDocument 404 /index.html
DocumentRoot "/Users/zhoum/Documents/workspace/fire/fire_service/dist"
ErrorLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.error.log
CustomLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.access.log combined
<Directory "/Users/zhoum/Documents/workspace/fire/fire_service/dist">
AllowOverride All
Options Indexes FollowSymLinks
#Order allow,deny
#Allow from All
Require all granted
</Directory>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST"
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "Accept-Encoding"
</VirtualHost>
당신이 어떤 서버를 사용하든, 나는 404를 당신의 index.html로 리디렉션하도록 서버를 구성하는 방법을 찾는 것이 요점이라고 생각합니다.
서버 구성은 SPA에 대한 솔루션이 아니라고 생각합니다.잘못된 경로가 들어오면 각도가 있는 SPA를 다시 로드하고 싶지는 않죠?따라서 서버 경로에 의존하지 않고 다른 경로로 리디렉션하지만 예, index.html이 각진 앱 경로의 모든 요청을 처리하도록 하겠습니다.
다른 경로나 잘못된 경로 대신 이 방법을 사용하십시오.저에게는 효과가 있지만, 확실하지는 않지만 진행 중인 작업인 것 같습니다.문제에 직면했을 때 이 문제를 스스로 해결했습니다.
@RouteConfig([
{ path: '/**', redirectTo: ['MycmpnameCmp'] },
...
}
])
https://github.com/angular/angular/issues/4055
그러나 SPA가 아닌 HTML 또는 웹 스크립트가 있는 경우에는 서버 폴더와 액세스를 구성해야 합니다.그렇지 않으면 문제가 발생할 것입니다.귀하와 같은 문제에 직면했을 때는 서버 구성과 그 이상이 혼재되어 있었습니다.
Angular 5 빠른 수정을 위해 app.vmdk.ts를 편집하고 추가합니다.{useHash:true}appRoutes 파일 뒤에 됩니다.
@NgModule(
{
imports:[RouterModule.forRoot(appRoutes,{useHash:true})]
})
각진 앱은 단순한 정적 HTML 서버와 함께 제공하기에 완벽한 후보입니다.Angular는 클라이언트 측에서 동적으로 응용프로그램 페이지를 구성하기 때문에 서버 측 엔진이 필요하지 않습니다.
앱이 Angular 라우터를 사용하는 경우, 애플리케이션에 없는 파일을 요청할 때 애플리케이션의 호스트 페이지(index.html)를 반환하도록 서버를 구성해야 합니다.
라우팅된 응용프로그램은 "딥 링크"를 지원해야 합니다.딥 링크는 앱 내부의 구성 요소에 대한 경로를 지정하는 URL입니다.예를 들어, http://www.example.com/heroes/42 은 ID: 42의 영웅을 표시하는 영웅 세부 정보 페이지에 대한 깊은 링크입니다.
사용자가 실행 중인 클라이언트 내에서 해당 URL로 이동해도 문제가 없습니다.Angular 라우터는 URL을 해석하고 해당 페이지와 영웅으로 경로를 지정합니다.
그러나 이메일에서 링크를 클릭하거나 브라우저 주소 표시줄에 링크를 입력하거나 영웅 세부 정보 페이지에 있는 동안 브라우저를 새로 고치면 이러한 모든 작업이 실행 중인 응용 프로그램 외부에서 브라우저 자체에서 처리됩니다.브라우저는 라우터를 우회하여 해당 URL을 서버에 직접 요청합니다.
정적 서버는 http://www.example.com/ 에 대한 요청을 수신할 때 정기적으로 index.dll을 반환합니다.그러나 index.dll을 대신 반환하도록 구성되지 않은 경우 http://www.example.com/heroes/42 을 거부하고 404 - Not Found 오류를 반환합니다.
이 문제가 프로덕션에서 발생한 경우 아래 단계를 수행합니다.
웹을 추가합니다.각도 응용 프로그램의 src 폴더에 있는 구성 파일입니다.그 안에 아래 코드를 넣어주세요.
<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="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
angular-cli.json에 참조를 추가합니다.angular-cli.json에서 아래와 같이 자산 블록에 Web.config를 배치합니다.
"assets": [
"assets",
"favicon.ico",
"Web.config"
],
이제 다음을 사용하여 프로덕션 솔루션을 구축할 수 있습니다.
ng build --prod
이렇게 하면 dist 폴더가 생성됩니다.dist 폴더 내부의 파일은 모든 모드에서 배포할 수 있습니다.
이 솔루션을 평균 애플리케이션에 사용할 수 있습니다. ejs를 뷰 엔진으로 사용했습니다.
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.use(function (req, res, next) {
return res.render('index.html');
});
또한 각-cli.json에 설정됩니다.
"apps": [
{
"root": "src",
"outDir": "views",
대신 잘 작동할 것입니다.
app.get('*', function (req, res, next) {
res.sendFile('dist/index.html', { root: __dirname });
});
getdb 호출 및 인덱스 반환과 관련된 문제를 만듭니다.
IIS에서 생활하면서 어려움을 겪고 있는 사람들을 위해: 다음 PowerShell 코드를 사용하여 공식 Angular 2 문서(누군가가 이 스레드에 게시한 문서)를 기반으로 이 문제를 해결하십시오.http://blog.angular-university.io/angular2-router/)
Import-WebAdministration
# Grab the 404 handler and update it to redirect to index.html.
$redirect = Get-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS
$redirect.path = "/index.html"
$redirect.responseMode = 1
# shove the updated config back into IIS
Set-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS -value $redirect
그러면 Angular 2 문서(위 링크)의 제안에 따라 404가 /index.html 파일로 리디렉션됩니다.
당신은 아래에서 시험해 볼 수 있습니다.나에게는 그게 효과가 있어요!
main.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
...
export class MainComponent implements OnInit {
constructor(private router: Router) {
let path: string = window.location.hash;
if (path && path.length > 0) {
this.router.navigate([path.substr(2)]);
}
}
public ngOnInit() { }
}
라우터 매개 변수로 분할되도록 path.substr(2)을 추가로 향상시킬 수 있습니다.각진 2.4.9를 사용하고 있습니다.
루트에 .htaccess를 추가하는 중입니다.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ ./index.html
</IfModule>
서는 /의 dot 를 ./ '.(부모 디렉토리)를 ./index.dot '.(으)로
기본 경로의 index.dll 파일이 주 디렉터리 경로이며 프로젝트 빌드에 설정되어 있는지 확인합니다.
인덱스로 다시 리디렉션하지 않고 HTML5 모드에서 하위 페이지의 URL 경로를 보존하고 싶었지만, 이 방법을 알려주는 솔루션이 없었기 때문에 이렇게 했습니다.
모든 경로에 대한 간단한 가상 디렉터리를 IIS에 생성하고 앱 루트를 가리킵니다.
시스템을 포장합니다.이 위치 태그가 있는 Web.config.xml의 webServer가 가상 디렉터리를 사용하여 Web.config를 두 번 로드하면 중복 오류가 발생합니다.
<configuration>
<location path="." inheritInChildApplications="false">
<system.webServer>
<defaultDocument enabled="true">
<files>
<add value="index.html" />
</files>
</defaultDocument>
</system.webServer>
</location>
</configuration>
각 2 씨앗이 어떻게 작동하는지 확인했습니다.
express-history-api-fallback을 사용하여 페이지를 다시 로드할 때 자동으로 리디렉션할 수 있습니다.
이것이 IMO 문제를 해결하는 가장 우아한 방법이라고 생각합니다.
경로 위치 전략을 사용하려는 경우:
- 와일드플라이 구성:
- WEB-INF에 배치할 bundow-handlers.conf 파일을 만듭니다.
- 내용 : (나머지 끝점 제외!)
- regex['(/.g/??$")] 및 regex['(/.dll.")]가 아니라 -> rewrite['/index.dll']입니다.
- regex['(/배치/?)?$")] 및 regex['(/.dll.")]가 아니라 -> rewrite['/index.dll']입니다.
Java EE/Wildfly를 사용하는 단일 페이지 응용 프로그램: 서버 측 구성
2017-7-11: 이 문제가 있지만 Angular 2를 Electron과 함께 사용하는 질문과 연결되어 있으므로 여기에 제 해결책을 추가하겠습니다.
할 은 제거하는 이었습니다.<base href="./">index.및 다시를 성공적으로 했습니다.index.html Electron 파일 이름은 다음과 같습니다.
가져오기 추가:
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
NgModule 공급자에서 다음을 추가합니다.
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
index.를 의앱 main index.html로 합니다../index.html/
앱이 서버에 배포되면 외부 응용 프로그램에서 액세스할 수 있는 페이지의 실제 URL이 제공됩니다.
root에 .htaccess를 추가하는 것만으로 angular 4 apache2의 페이지를 새로 고치는 동안 404가 해결되었습니다.
<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html
# to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>
Tomcat 서버에 없는 http://localhost/route를 요청하셔서 404를 받으신 것 같습니다.Angular 2는 URL 끝에 해시를 사용하지 않고 기본적으로 html 5 라우팅을 사용하므로 페이지 새로 고침은 다른 리소스에 대한 요청처럼 보입니다.
Tomcat에서 각도 라우팅을 사용할 때는 페이지를 새로 고치는 동안 서버가 앱의 모든 경로를 주 index.html에 매핑해야 합니다.이 문제를 해결하는 방법은 여러 가지가 있습니다.어느 것이든 당신에게 맞는 것으로 그것을 선택할 수 있습니다.
배포 폴더의 web.xml에 아래 코드를 입력합니다.
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
경로에 대한 URL에서 #과 함께 HashLocationStrategy를 사용할 수도 있습니다.
사용해 보십시오.
RouterModule.forRoot(루트, {useHash:true})
다음 대신:
RouterModule.forRoot(루트)
HashLocationStrategy를 사용하면 URL은 다음과 같습니다.
Tomcat URL Rewrite Valve : 서버 수준 구성을 사용하여 리소스를 찾을 수 없는 경우 index.html로 리디렉션하여 URL을 다시 씁니다.
3.1) META-INF 폴더 안에 context.xml 파일을 만들고 그 안에 아래 컨텍스트를 복사합니다.
<? xml version='1.0' encoding='utf-8'?>
<Context>
<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Context>
3.2) WEB-INF 내에 rewrite.config 파일을 만듭니다(이 파일에는 URL 다시 쓰기에 대한 규칙이 포함되어 있으며 Tomcat에서 URL 다시 쓰기에 사용됩니다).rewrite.config 내부에서 다음 내용을 복사합니다.
RewriteCond %{SERVLET_PATH} !-f
RewriteRule ^/(.*)$ /index.html [L]
전략, 위치전략, ▁location▁strategy▁you,▁use를 사용할 수 .useHash: true라우팅 파일에 있습니다.
imports: [RouterModule.forRoot(routes, { useHash: true })]
이것은 정답은 아니지만 404페이지를 희생하여 모든 데드콜을 홈페이지로 리디렉션할 수 있습니다. 404.html 파일에 이어 임시 해킹입니다.
<!doctype html>
<html>
<head>
<script type="text/javascript">
window.location.href = "http://" + document.location.host;
</script>
</head>
</html>
"라우터-비작동-재로드-브라우저"를 해결하는 가장 좋은 해결책은 스파-폴백을 사용하는 것입니다.만약 당신이 asp.net core와 함께 angular2 어플리케이션을 사용하고 있다면, 우리는 "StartUp.cs " 페이지에서 그것을 정의해야 합니다.MVC 라우팅 하에서.코드를 첨부합니다.
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" });
});
답은 꽤 까다롭습니다.일반적인 이전 Apache 서버(또는 IIS)를 사용하는 경우 Angular 페이지가 실제 존재하지 않기 때문에 문제가 발생합니다.각 경로에서 "계산"됩니다.
이 문제를 해결하는 몇 가지 방법이 있습니다.하나는 Angular에서 제공하는 HashLocation Strategy를 사용하는 것입니다.하지만 URL에 날카로운 기호가 추가되어 있습니다.이것은 주로 Angular 1과의 호환성을 위한 것입니다.사실은 샤프가 URL의 일부가 아닌 다음 부분입니다. 그러면 서버는 "#" 기호 앞에 있는 부분을 확인합니다.완벽할 수 있습니다.
여기에 404 트릭에 기반한 향상된 방법이 있습니다. 애플리케이션의 " 있다고 가정합니다.ng build --prodAngular-CLI)를 사용하여 서버로 직접 페이지에 액세스하고 PHP가 활성화된 경우.
웹 사이트가 페이지(예: Wordpress)를 기반으로 하며 Angular 전용 폴더가 하나뿐인 경우(내 예에서는 "dist"라는 이름), 이상하지만 마지막에는 간단한 작업을 수행할 수 있습니다. "/dist"와 에합니다.<BASE HREF="/dist/">) 리다이렉션과.404의 을 사용합니다.
Apache "(으)로 표시됨).htaccess directory의 file)을 추가해야 .ErrorDocument 404 /404.php
404.php는 다음 코드로 시작합니다.
<?php
$angular='/dist/';
if( substr($_SERVER['REQUEST_URI'], 0, strlen($angular)) == $angular ){
$index = $_SERVER['DOCUMENT_ROOT'] . $angular . "index.html";
http_response_code(200);
include $index;
die;
}
// NOT ANGULAR...
echo "<h1>Not found.</h1>"
$angular는 각도 각에 HREF 입니다.index.html.
원리는 매우 간단합니다. Apache가 페이지를 찾지 못하면 PHP 스크립트로 404 리디렉션됩니다.우리는 단지 페이지가 각진 애플리케이션 디렉토리 안에 있는지 확인할 뿐입니다.이 경우 index.html을 리디렉션하지 않고 직접 로드합니다. URL을 변경하지 않으려면 이 작업이 필요합니다.또한 HTTP 코드를 404에서 200으로 변경합니다(크롤러의 경우에만 더 좋습니다).
페이지가 각도 응용 프로그램에 없으면 어떻게 합니까?각도 라우터의 "catch all"을 사용합니다(각도 라우터 설명서 참조).
이 방법은 기본 웹사이트 내에 내장된 Angular 애플리케이션에서 작동합니다(나중에 그럴 것이라고 생각합니다).
주의:
- 동일한 작업을 수행하려고 합니다.
mod_redirect(URL을 다시 작성함으로써) 파일(예: 자산)을 실제로 로드해야 하기 때문에 "찾을 수 없음" 솔루션을 사용하는 것보다 훨씬 더 위험하기 때문에 전혀 좋은 솔루션이 아닙니다. - 다을사여리션디를 사용하여 리디렉션하기만 .
ErrorDocument 404 /dist/index.html작동하지만 Apache는 여전히 404 오류 코드로 응답합니다(크롤러에 좋지 않음).
이는 문제를 영구적으로 해결하는 것이 아니라 해결 방법이나 해킹에 가깝습니다.
Angular App을 페이지에 배포할 때도 바로 이와 같은 문제가 있었습니다.먼저 gh-pages 페이지를 새로 고칠 때 404개의 메시지를 받았습니다.
그리고 @gunter가 지적했듯이 저는 사용하기 시작했습니다.HashLocationStrategyAngular 2와 함께 제공되었습니다.
자체의 문제들과 함께 왔습니다.#. 이 url과 하게 보이게 . url은 url과 같은 url입니다.https://rahulrsingh09.github.io/AngularConcepts/#/faq.
저는 이 문제에 대해 연구하기 시작했고 블로그를 우연히 발견했습니다.시도해봤는데 효과가 있었어요.
여기 그 블로그에서 언급한 것처럼 제가 한 일이 있습니다.
먼저 404.html 파일을 gh-pages repo에 추가해야 합니다. 여기에는 빈 HTML 문서가 포함되어 있습니다. 그러나 문서의 합계는 512바이트 이상이어야 합니다(아래 설명 참조).그런 다음 404.html 페이지의 헤드 요소에 다음 마크업을 넣습니다.
<script>
sessionStorage.redirect = location.href;
</script>
<meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'"></meta>
이 코드는 시도된 진입 URL을 표준 sessionStorage 개체의 변수로 설정하고 메타 새로 고침 태그를 사용하여 프로젝트의 index.html 페이지로 즉시 리디렉션합니다.Github Organization 사이트를 사용하는 경우, 내용 속성 바꾸기 텍스트에 repo 이름을 넣지 말고 다음과 같이 하십시오. content="0;URL=syslog'"
사용자가 처음 탐색한 URL을 캡처하고 복원하려면 페이지의 현재 상태에서 다른 JavaScript가 작동하기 전에 index.html 페이지 머리에 다음 스크립트 태그를 추가해야 합니다.
<script>
(function(){
var redirect = sessionStorage.redirect;
delete sessionStorage.redirect;
if (redirect && redirect != location.href) {
history.replaceState(null, null, redirect);
}
})();
</script>
이 JavaScript 비트는 404.html 페이지의 sessionStorage over에서 캐시한 URL을 검색하고 현재 기록 항목을 이 URL로 바꿉니다.
참조 백알리코더 이 해결 방법에 대해 @Daniel에게 감사드립니다.
이제 위의 URL이 https://rahulrsingh09.github.io/AngularConcepts/faq 으로 변경됩니다.
404 대신 index.html을 전송하는 내 Angular 경로에 정의된 모든 것과 일치하는 핸들러를 추가하여 (Java/Spring 백엔드를 사용하여) 이 문제를 해결했습니다.그러면 효과적으로 응용 프로그램이 부트되고 올바른 페이지가 로드됩니다.저는 이것에 걸리지 않는 모든 것에 대한 404 핸들러도 가지고 있습니다.
@Controller ////don't use RestController or it will just send back the string "index.html"
public class Redirect {
private static final Logger logger = LoggerFactory.getLogger(Redirect.class);
@RequestMapping(value = {"comma", "sep", "list", "of", "routes"})
public String redirectToIndex(HttpServletRequest request) {
logger.warn("Redirect api called for URL {}. Sending index.html back instead. This will happen on a page refresh or reload when the page is on an Angular route", request.getRequestURL());
return "/index.html";
}
}
언급URL : https://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser
'source' 카테고리의 다른 글
| 최신 파일 일치 패턴을 찾기 위한 Bash 기능 (0) | 2023.05.27 |
|---|---|
| val()을 사용하여 선택 값을 설정할 때 jquery change 이벤트가 트리거되지 않는 이유는 무엇입니까? (0) | 2023.05.27 |
| 기본 브라우저에서 웹 페이지 열기 (0) | 2023.05.27 |
| Xcode -- $(SRCROOT)란 무엇입니까? (0) | 2023.05.27 |
| Angular2가 버튼을 클릭할 때 양식을 체계적으로 제출하지 않도록 합니다. (0) | 2023.05.27 |