web-dev-qa-db-ja.com

ページを更新すると404エラーが発生する-Angular 6

Angular6を使用してアプリケーションを構築し、ルーティングの問題に直面しています。すべてのルートは特定のタブをクリックすると機能しますが、現在のページを更新すると、404エラーがスローされます。スタックオーバーフローに関するこの問題に関する多くの投稿を見てきましたが、この問題を克服できませんでした。

以下は私のapp.module.tsです

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AppComponent} from './app.component';
import {FetchApiComponent} from './fetch-api/fetch-api.component';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {UserServiceLatest} from './fetch-latest/app.service';
import {UserServiceTop} from './fetch-top/app.service';
import {YoutubePlayerModule} from 'ngx-youtube-player';
import {SidebarComponent} from './sidebar/sidebar.component';
import {FetchLatestComponent} from './fetch-latest/fetch-latest.component';
import { FetchTopComponent } from './fetch-top/fetch-top.component'
import {UserService} from './fetch-api/app.service';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { AngularFireModule } from 'angularfire2';
import * as firebase from 'firebase';
import { firebaseConfig } from './../environments/firebase.config';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import {PushService} from './Push.service';

const appRoutes: Routes = [
  {
    path: '',

  component: FetchApiComponent
  }, 
{
    path: '/latest',

    component: FetchLatestComponent
  },
{
    path: '/top',

    component: FetchTopComponent
  },
{
path :'*',
component: FetchApiComponent 
}

];

firebase.initializeApp(firebaseConfig);

@NgModule({
  declarations: [
    AppComponent,
    FetchApiComponent,SidebarComponent, FetchLatestComponent, FetchTopComponent
  ],
  imports: [
    RouterModule.forRoot(appRoutes),
    BrowserModule, YoutubePlayerModule,
    FormsModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,environment.production ?ServiceWorkerModule.register('firebase-messaging-sw.js'):[],ServiceWorkerModule.register('/firebase-messaging-sw.js', { enabled: environment.production }),
    HttpClientModule,environment.production ? ServiceWorkerModule.register('ngsw-worker.js') : [], ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [UserService,UserServiceTop,UserServiceLatest,PushService],

  bootstrap: [AppComponent]
})
export class AppModule {}

私を正しい方向に向けることができますか？

angular6
18
N Sharma

あなたの例のURLでは、404エラーを取得すると動作しないことがわかりますが、前にハッシュを含める/#latestのような角度固有のURL作業。

更新すると動作しなくなるのはなぜですか？ ウェブサーバーはGETをインターセプトしていますブラウザーからのリクエストで、存在しないディレクトリ/latestに直接移動しようとしています。 /bosv2に移動し、angularアプリを見つけて、実際のディレクトリではなく、角度のルーティングであるパスに小さな終了ビットを追加する必要があることを知らない。ローカルでは、ng serveを実行しているときと同じように機能しますが、webpack webserverはこのために準備されていますが、アプリをホストしているホストでは準備されていません。

デフォルトでは、angularはHTML5スタイルナビゲーションを使用していますが、現在のWebサーバー設定では、古いanglejsスタイル（ハッシュ番号付き）が必要です。

ここから、2つのソリューションが得られます。

  1. Webサーバーの構成を変更する

  2. AngularにHashLocationStrategy（完全に有効なソリューション）を使用するように指示すると、オブジェクトにuseHash: trueをAppModuleのRouterModule.forRootの2番目の引数として提供することで、HashLocationStrategyを使いこなすことができます。

    @NgModule（{imports：[... RouterModule.forRoot（routes、{useHash：true}）// ... /＃/ latest /]、...

私はハッシュスタイルに行くと言うでしょう欠点のカップル、これはあなたのシナリオに関連しないかもしれません：

  1. ユーザーが理解して覚えやすい、クリーンでSEOフレンドリーなURLは生成されません。
  2. サーバー側のレンダリングを利用することはできません。

この回答がお役に立てば幸いです:)

22
Javier Aviles

.htaccessを使用すると、次の方法でも試すことができます。

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

ハッシュ化されたルートを使用しないようにするには、Webサーバーの構成を適切に編集する必要があります。これが最適なソリューションです。 Angularのブートストラップであるindex.htmlにフォールバックするように設定する必要があります。これには普遍的な構成はありませんが、以下にいくつかを示します。

Apache

.htaccessファイルに書き換えルールを追加します

RewriteEngine On
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Nginx

ロケーションブロックでtry_filesを使用します

try_files $uri $uri/ /index.html;

IIS

web.configに書き換えルールを追加します

<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="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

ソース： https://angular.io/guide/deployment#server-configuration

8
GTX

App.module.tsで

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

インポート後、プロバイダーに次の行を追加します。

{provide: LocationStrategy, useClass: HashLocationStrategy}

例：

providers: [AuthService, 
            AuthGuard, 
            FlxUiDataTable,
            {provide: LocationStrategy, useClass: HashLocationStrategy}]

これで問題が解決します。 ドキュメント こちらをご覧ください。

4
Nimezzz

Tomcatサーバーに存在しない http：// localhost/route を要求しているため、404を取得していると思います。 Angular 2はURLの最後にハッシュを使用するのではなく、デフォルトでhtml 5ルーティングを使用するため、ページの更新は別のリソースに対する要求のように見えます。

Tomcatでangularルーティングを使用する場合、ページを更新するときに、サーバーがアプリのすべてのルートをメインの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 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]

1
karan khanna

私の場合、私は次のことをしました

方法1：

あなたのapp.module.tsインポート

import { HashLocationStrategy, LocationStrategy } from '@angular/common';
@NgModule({
  declarations: [...],
  imports: [...],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
  bootstrap: [AppComponent]
})

そしてビルド

ng build --base-href/[PROJECT_NAME] /

方法2：

nginxの場合、

nano/etc/nginx/sites-available/default

ロケーションブロックに次の行を追加します

location /[PROJECT_NAME] {
  try_files $uri $uri/ /[PROJECT_NAME]/index.html;
}

Sudoサービスnginxの再起動

そしてビルド

ng build --base-href/[PROJECT_NAME] /

0
Renish Gotecha