Angular 2.0.0-alpha.30 버전을 사용하고 있습니다. 다른 경로로 리디렉션하면 브라우저를 새로 고침하여 GET / 라우트 할 수 없음을 표시합니다.

이 오류가 발생한 이유를 알아낼 수 있습니까?

당신이보고있는 오류는 존재하지 않는 http : // localhost / route를 요청하기 때문입니다. 사이먼 에 따르면 .

html5 라우팅을 사용하는 경우 앱의 모든 경로 (현재 404)를 서버 측의 index.html 에 매핑 해야합니다 . 다음은 몇 가지 옵션입니다.

1. 라이브 서버 사용 : https://www.npmjs.com/package/live-server

   $live-server --entry-file=index.html`
   

2. nginx 사용 : http://nginx.org/en/docs/beginners_guide.html

   error_page 404 /index.html
   

3. Tomcat-web.xml 구성 에서 Kunin 의 코멘트

   <error-page>
         <error-code>404</error-code>
         <location>/index.html</location>
   </error-page>
   

면책 조항 :이 수정은 Alpha44에서 작동합니다

Angular.io API Preview에 나열된 HashLocationStrategy 를 구현하여 동일한 문제가 발생하여 해결했습니다 .

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 로 표시되며 새로 고침하면 올바른 위치에 다시로드됩니다.

희망이 도움이됩니다!

기본적으로 Angular는 HTML5 pushstate를 사용합니다 ( PathLocationStrategyAngular 속어).
요청한 것과 같은 모든 요청을 처리하는 서버가 필요 index.html하거나 https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class (HashLocationStrategy 라우트 URL에 # 포함)로 전환해야 합니다. 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이 일반적인 전체 HTML URL입니다 (예 :) http://localhost/route.

따라서 브라우저 표시 줄에서 Enter 키를 누르면라는 파일을 얻기 위해 서버로 전송되는 실제 HTTP 요청이 있습니다 route.

서버에는 그러한 파일이 없으며, 요청을 처리하고 응답을 제공하도록 express와 같은 것이 서버에 구성되어 있지 않으므로 서버는 route파일을 찾을 수 없기 때문에 404 Not Found를 리턴 합니다.

우리가 원하는 것은 서버가 index.html단일 페이지 응용 프로그램이 포함 된 파일 을 반환하는 것 입니다. 그런 다음 라우터는 /routeURL을 시작하고 처리하여 매핑 된 구성 요소를 표시해야합니다.

따라서 문제를 해결하려면 index.html404 Not Found와는 달리 요청을 처리 할 수없는 경우 서버가 단일 페이지 응용 프로그램 파일 이름이라고 가정 하여 반환하도록 서버를 구성해야합니다 .

이를 수행하는 방법은 사용중인 서버 측 기술에 따라 다릅니다. 예를 들어 Java가 서블릿을 작성 해야하는 경우 Rails에서 다릅니다.

구체적인 예를 들어, 예를 들어 NodeJ를 사용하는 경우 다음과 같은 미들웨어를 작성해야합니다.

function sendSpaFileIfUnmatched(req,res) {
    res.sendFile("index.html", { root: '.' });
}

그런 다음 미들웨어 체인의 맨 끝에 등록하십시오.

app.use(sendSpaFileIfUnmatched);

이것은 index.html404를 반환하는 대신 제공 되며 라우터가 작동하고 모든 것이 예상대로 작동합니다.

이것이 index.html의 head 요소에 있는지 확인하십시오.

<base href="https://stackoverflow.com/">

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경우 (이전에 작성하지 않은 경우) RewriteEngine을 작성해야합니다.

RewriteEngine On  
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html

내 서버는 Apache이므로 새로 고치거나 딥 링크 할 때 404를 수정하기 위해 수행 한 작업이 매우 간단합니다. apache vhost config에 한 줄만 추가하십시오.

ErrorDocument 404 /index.html

따라서 404 오류는 angular2 라우팅이 원하는 index.html로 리디렉션됩니다.

전체 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 또는 웹 스크립트가있는 경우 서버 폴더를 구성하고 액세스 권한을 부여해야합니다. 그렇지 않으면 문제에 직면하게됩니다. 당신과 같은 문제에 직면했을 때 그것은 서버 구성과 그 이상의 혼합이었습니다.

각도 5 빠른 수정을 위해 app.module.ts를 편집하고 appRoutes{useHash:true} 뒤에 추가 하십시오.

@NgModule(
{
  imports:[RouterModule.forRoot(appRoutes,{useHash:true})]
})

Angular 앱은 간단한 정적 HTML 서버를 제공하기에 완벽한 후보입니다. Angular는 클라이언트 쪽에서 응용 프로그램 페이지를 동적으로 작성하기 위해 서버 쪽 엔진이 필요하지 않습니다.

앱이 Angular 라우터를 사용하는 경우 서버에없는 파일을 요청할 때 서버가 애플리케이션의 호스트 페이지 (index.html)를 반환하도록 구성해야합니다.

라우팅 된 응용 프로그램은 "딥 링크"를 지원해야합니다. 딥 링크는 앱 내부의 구성 요소에 대한 경로를 지정하는 URL입니다. 예를 들어, http://www.example.com/heroes/42 는 영웅 세부 정보 페이지에 대한 딥 링크로, ID가 42 인 영웅을 표시합니다.

사용자가 실행중인 클라이언트 내에서 해당 URL로 이동할 때 문제가 없습니다. Angular 라우터는 URL을 해석하고 해당 페이지와 히어로로 라우트합니다.

그러나 전자 메일의 링크를 클릭하거나 브라우저 주소 표시 줄에 입력하거나 영웅 세부 정보 페이지에서 브라우저를 새로 고치면 이러한 모든 작업은 실행중인 응용 프로그램 외부의 브라우저 자체에서 처리됩니다. 브라우저는 라우터를 무시하고 해당 URL을 서버에 직접 요청합니다.

정적 서버는 http://www.example.com/에 대한 요청을 받으면 일상적으로 index.html을 반환합니다 . 그러나 http://www.example.com/heroes/42를 거부 하고 대신 index.html을 반환하도록 구성되어 있지 않으면 404-찾을 수 없음 오류를 반환합니다.

이 문제가 프로덕션에서 발생한 경우 아래 단계를 수행하십시오.

1) 각도 응용 프로그램의 src 폴더에 Web.Config 파일을 추가하십시오. 코드 아래에 배치하십시오.

<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>

2) angular-cli.json에 참조를 추가하십시오. angular-cli.json에서 아래 표시된 것처럼 자산 블록에 Web.config를 넣으십시오.

"assets": [
    "assets",
    "favicon.ico",
    "Web.config"
  ],

3) 이제 다음을 사용하여 생산을위한 솔루션을 구축 할 수 있습니다

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');
});

또한 angular-cli.json에 설정

"apps": [
    {
      "root": "src",
      "outDir": "views",

대신에 잘 작동합니다

app.get('*', function (req, res, next) {
    res.sendFile('dist/index.html', { root: __dirname });
 });

get db 호출 및 return.html 반환과 관련된 생성 문제

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>

여기에서 /index.html의 도트 '.'(부모 디렉토리)를 ./index.html에 추가
하면 기본 경로의 index.html 파일이 기본 디렉토리 경로이고 프로젝트 빌드에서 설정되어 있는지 확인하십시오.

색인으로 다시 리디렉션하지 않고 HTML5 모드에서 하위 페이지의 URL 경로를 유지하고 싶었지만 거기에 어떤 해결책도이를 수행하는 방법을 알려주지 않았으므로 이것이 내가 달성 한 방법입니다.

모든 경로에 대해 IIS에서 간단한 가상 디렉터리를 만들고 앱 루트를 가리 킵니다.

web.config.xml에서 system.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 을 사용하여 자동으로 리디렉션 할 수 있습니다 .

이 문제를 해결하는 가장 우아한 방법이라고 생각합니다.

PathLocationStrategy를 사용하려는 경우 :

• Wildfly 구성 :
  • WEB-INF에 배치 할 undertow-handlers.conf 파일을 작성하십시오.
  • 내용 : (휴식 끝점 제외!)
    • regex [ '(. / overview / ?. ? $)'] 및 regex [ '(. / endpoints. )']-> rewrite [ '/ index.html'] 아님
    • regex [ '(. / deployments / ?. ? $)'] 및 regex [ '(. / endpoints. )']-> rewrite [ '/ index.html'] 아님

Java EE / Wildfly가 포함 된 단일 페이지 응용 프로그램 : 서버 측 구성

2017-7 월 11 : 이 문제가 있지만 Electron과 함께 Angular 2를 사용하는 질문 과 관련 이 있으므로 여기에 솔루션을 추가하겠습니다.

<base href="./">index.html에서 제거 하기 만하면 Electron이 페이지를 다시로드하기 시작했습니다.

수입품 추가 :

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

NgModule 제공자에서 다음을 추가하십시오.

providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

앱의 주요 index.html 파일에서의 기본 href 변경 ./index.html에서을/

서버에 배포 할 때 앱은 외부 애플리케이션에서 액세스 할 수있는 페이지의 실제 URL을 제공합니다.

angular 4 apache2에서 페이지를 새로 고치는 동안 루트에서 .htaccess 를 추가하면 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>

바람둥이 서버에 존재하지 않는 http : // localhost / route 를 요청하고 있기 때문에 404를 얻고 있다고 생각 합니다. Angular 2는 URL 끝에 해시를 사용하지 않고 기본적으로 html 5 라우팅을 사용하므로 페이지를 새로 고치는 것은 다른 리소스에 대한 요청처럼 보입니다.

Tomcat에서 각도 라우팅을 사용하는 경우 서버가 페이지를 새로 고치는 동안 앱의 모든 경로를 기본 index.html에 매핑해야합니다. 이 문제를 해결하는 방법은 여러 가지가 있습니다. 어느 것이 당신에게 어울리 든 갈 수 있습니다.

1) 배포 폴더의 web.xml에 아래 코드를 넣으십시오.

<error-page>
     <error-code>404</error-code>
     <location>/index.html</location>
</error-page>

2) 경로의 URL에서 HashLocationStrategy를 #과 함께 사용해 볼 수도 있습니다.

다음을 사용하십시오.

RouterModule.forRoot (routes, {useHash : true})

대신에:

라우터 모듈 forRoot (라우트)

HashLocationStrategy를 사용하면 URL은 다음과 같습니다.

http : // localhost / # / route

3) Tomcat URL 다시 쓰기 밸브 : 리소스를 찾을 수없는 경우 서버 수준 구성을 사용하여 URL을 다시 작성하여 index.html로 리디렉션합니다.

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 재 작성 규칙을 포함하고 URL 재 작성을 위해 tomcat에 의해 사용됨). rewrite.config 내부에서 아래 내용을 복사하십시오.

  RewriteCond %{SERVLET_PATH} !-f
  RewriteRule ^/(.*)$ /index.html [L]

이것은 정답은 아니지만 새로 고침시 404 페이지를 희생하여 모든 죽은 통화를 홈페이지로 리디렉션 할 수 있습니다 .404.html 파일에서 다음과 같은 임시 해킹입니다.

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            window.location.href = "http://" + document.location.host;
        </script>
    </head>
</html>

"라우터가 작동하지 않을 때 브라우저를 다시로드 할 때"문제를 해결하는 가장 좋은 방법은 스파 폴백을 사용해야한다는 것입니다. asp.net 코어와 함께 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 경로에서 "계산"됩니다.

이 문제를 해결하는 방법에는 여러 가지가 있습니다. 하나는 Angular에서 제공 하는 HashLocationStrategy 를 사용하는 것 입니다. 그러나 URL에는 예리한 기호가 추가됩니다. 이것은 주로 Angular 1과의 호환성을위한 것입니다 (나는 가정합니다). 사실은 sharp가 URL의 일부가 아닌 부분입니다 (서버는 "#"기호 앞의 부분을 확인합니다). 완벽 할 수 있습니다.

향상된 방법 (404 트릭을 기반으로 함). ng build --prodAngular-CLI를 사용하는 경우 앵귤러 응용 프로그램의 "분산"버전이 있고 서버에서 직접 페이지에 액세스하고 PHP가 활성화되어 있다고 가정합니다 .

귀하의 웹 사이트가 페이지 (예 : Wordpress)를 기반으로하고 Angular 전용 폴더가 하나만있는 경우 (예제에서 "dist"라는 이름의) 폴더가 이상하지만 결국에는 간단합니다. 나는 당신이 Angular 페이지를 "/ dist"(에 따라 <BASE HREF="/dist/">)로 저장했다고 가정합니다 . 이제 404 리디렉션과 PHP의 도움을 사용하십시오.

Apache 구성 (또는 .htaccess앵귤러 애플리케이션 디렉토리 의 파일)에서 다음을 추가해야합니다.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으로 변경했습니다 (크롤러에게는 더 좋습니다).

페이지가 각도 응용 프로그램에 없으면 어떻게합니까? 우리는 앵귤러 라우터의 "모두 캐치"를 사용합니다 (앵귤러 라우터 설명서 참조).

이 방법은 기본 웹 사이트에 내장 된 Angular 응용 프로그램과 함께 작동합니다 (향후에는 가능할 것이라고 생각합니다).

노트:

• mod_redirect에셋과 같은 파일을 실제로로드해야하기 때문에 "찾을 수 없음"솔루션을 사용하는 것보다 훨씬 더 위험하므로 URL을 다시 작성 하여 동일한 작업을 시도하는 것은 전혀 좋은 해결책이 아닙니다.
• ErrorDocument 404 /dist/index.html작동을 사용하여 리디렉션 하지만 Apache는 여전히 404 오류 코드로 응답합니다 (크롤러에게는 좋지 않습니다).

이것은 문제에 대한 영구적 인 수정은 아니지만 해결 방법이나 해킹과 같습니다.

Angular 앱을 gh-pages에 배포 할 때 이와 동일한 문제가 발생했습니다. 먼저 gh-pages에서 내 페이지를 새로 고칠 때 404 메시지가 나타났습니다.

그런 다음 @gunter가 지적한대로 HashLocationStrategyAngular 2와 함께 제공된 것을 사용하기 시작했습니다 .

그러나 그것은 그 자체의 문제 세트와 함께 #url에서 URL이 이와 같이 더 이상하게 보이게 만들었습니다 https://rahulrsingh09.github.io/AngularConcepts/#/faq.

이 문제에 대해 조사하기 시작했고 블로그를 발견했습니다. 나는 그것을 주사를 시도하고 작동했습니다.

그 블로그에서 언급했듯이 여기에 내가 한 일이 있습니다.

빈 HTML 문서가 포함 된 gh-pages 저장소에 404.html 파일을 추가하여 시작해야합니다. 그러나 문서는 총 512 바이트 이상이어야합니다 (아래 설명). 다음으로 404.html 페이지의 head 요소에 다음 마크 업을 넣으십시오.

<script>
  sessionStorage.redirect = location.href;
</script>
<meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'"></meta>

이 코드는 시도한 시작 URL을 표준 sessionStorage 객체의 변수로 설정하고 메타 새로 고침 태그를 사용하여 프로젝트의 index.html 페이지로 즉시 리디렉션합니다. Github Organization 사이트를 수행하는 경우 content attribute replacer 텍스트에 repo 이름을 입력하지 마십시오. content = "0; URL = '/'"

사용자가 처음 탐색 한 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에 캐시 한 URL을 검색하고 현재 히스토리 항목을 해당 URL로 바꿉니다.

참조 backalleycoder 이 해결 방법에 대해 @Daniel 에게 감사합니다.

이제 위의 URL이 https://rahulrsingh09.github.io/AngularConcepts/faq로 변경되었습니다.

Angular 경로에 정의 된 모든 항목과 일치하는 처리기를 추가하여 404 대신 index.html을 다시 보내서이 문제를 해결했습니다 (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";
    }
}

Apache 또는 Nginx를 서버로 사용하는 경우 .htaccess를 작성해야합니다.

<IfModule mime_module>
      AddHandler application/x-httpd-ea-php72 .php .php7 .phtml
    </IfModule>
    # php -- END cPanel-generated handler, do not edit

    <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>