Angular 2.0.0-alpha.30バージョンを使用しています。別のルートにリダイレクトした後、ブラウザを更新すると、「GET /ルートを取得できません」と表示されます。

このエラーが発生した理由を理解するのを手伝ってくれませんか。

表示されているエラーは、存在しないhttp：// localhost / routeをリクエストしているためです。サイモンによると。

html5ルーティングを使用する場合、アプリ内のすべてのルート（現在は404）をサーバー側のindex.htmlにマッピングする必要があります。ここにあなたのためのいくつかのオプションがあります：

1. live-serverを使用：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プレビューにリストされている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スラング）。
リクエストのようにすべてのリクエストを処理するサーバーが必要か、https：//angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class（ルートのURLに＃index.htmlを使用）に切り替える必要があります。 htmlHashLocationStrategy

https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/も参照してください

HashLocationStrategy使用に切り替えるには

> = RC.5および2.0.0 finalの更新

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

> = beta.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';

<beta.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 Breaking-changes も参照してください。

あなたが見ているエラーはあなたが存在しない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.html、404 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 ルーティングとナビゲーションのドキュメントの例では、代わりに次のコードをヘッドで使用しています（ドキュメントのライブサンプルノートで理由を説明しています）。

<script>document.write('<base href="' + document.location + '" />');</script>

ページを更新すると、base 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の使用に関しても同じ問題がありました。私は自分のwebpackに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に1行追加するだけです。

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またはWebスクリプトがある場合は、サーバーフォルダーとアクセス権を設定してください。そうでなければ、問題に直面します。私のようにあなたのような問題に直面したとき、それはサーバー構成と上記の混合でした。

角度5のクイックフィックスの場合は、app.module.tsを編集{useHash:true}し、appRoutesの後に追加します。

@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を返します。しかし、代わりにindex.htmlを返すように構成されていない限り、http：//www.example.com/heroes/42を拒否し、404-Not Foundエラーを返します。

この問題が本番環境で発生した場合は、以下の手順に従ってください

1）Angularアプリケーションの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呼び出しと返されるindex.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）をさらに拡張して、ルーターのパラメーターに分割できます。私はangular 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ですべてのルートの単純な仮想ディレクトリを作成し、アプリルートを指すようにします。

system.webServerをWeb.config.xmlでこの場所タグでラップします。そうしないと、仮想ディレクトリを使用してWeb.configを2回目にロードするときに重複エラーが発生します。

<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を解決する最もエレガントな方法だと思います。

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が提供されます。

ルートに.htaccessを追加するだけで、角度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>

あなたがhttp：// localhost / routeをリクエストしているので、あなたは404を手に入れていると思いますTomcatサーバーに存在しないをます。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}）

の代わりに：

RouterModule.forRoot（routes）

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書き換えのルールが含まれ、tomcatがURL書き換えに使用します）。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>

「ルーターが機能していない、またはリロード中のブラウザー」を解決する最善の方法は、spa-fall backを使用することです。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ルートから「計算」されます。

この問題を修正するにはいくつかの方法があります。1つは、Angularが提供するHashLocationStrategyを使用することです。ただし、URLにはシャープ記号が追加されます。これは主にAngular 1と​​の互換性のためです（私はそう思います）。事実は、シャープがURLの一部ではない後の部分です（サーバーは「＃」記号の前の部分を解決します）。それは完璧です。

ここでは、強化されたメソッド（404トリックに基づく）です。私はあなたがあなたの角度アプリケーションの「分散」バージョンを持っていると思います（ng build --prodAngular Angular-CLIを使用している場合）、サーバーで直接ページにアクセスし、PHPが有効になっしています。

Webサイトがページ（Wordpressなど）に基づいていて、Angular専用のフォルダーが1つしかない場合（この例では「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アプリケーションにページが存在しない場合はどうなりますか？さて、私たちは角度ルータの「すべてをキャッチ」を使用します（Angularルータのドキュメントを参照）。

この方法は、基本的なWebサイト内に埋め込まれたAngularアプリケーションで機能します（将来的にはそうなると思います）。

ノート：

• 同じことをしようとする mod_redirectファイル（アセットなど）を実際にロードする必要があるため（URLを書き換えて）で決して良い解決策ではありません。
• ErrorDocument 404 /dist/index.html機能を使用してリダイレクトするだけですが、Apacheは404エラーコードで応答します（これはクローラーには不適切です）。

これは問題の恒久的な修正ではありませんが、回避策やハックのようなものです

Angularアプリをgh-pagesにデプロイするときにも同じ問題が発生しました。まず、gh-pagesでページを更新すると、404メッセージが表示されました。

次に、@ gunterが指摘したように、私は使い始めました HashLocationStrategy、Angular 2で提供。

しかし、それはそれ自体に一連の問題がある#ため、URLが本当に悪かったため、URLはこのように奇妙に見えましたhttps://rahulrsingh09.github.io/AngularConcepts/#/faq。

私はこの問題について調べ始め、ブログに出くわしました。試してみましたが、うまくいきました。

これがそのブログで述べたように私がやったことです。

空のHTMLドキュメントが含まれているgh.pagesリポジトリに404.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組織サイトを使用している場合は、コンテンツ属性の置換テキストにリポジトリ名を入力せず、次のようにしてください：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がhttps://rahulrsingh09.github.io/AngularConcepts/faqに変わります

私はこれを（Java / Springバックエンドを使用して）修正しました。Angularルートで定義されたすべてに一致するハンドラーを追加し、404ではなくindex.htmlを送り返します。これにより、アプリケーションが効果的に（再）ブートストラップされ、正しいページがロードされます。また、これで捕捉できないもののための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>