刷新页面会导致404错误角6。

Question

我正在Angular6的帮助下构建一个应用程序，并面临路由方面的问题。当我单击特定的选项卡时，所有的路由都在工作，但是每当我刷新当前页面时，它就会抛出404错误。我在Stack溢出上看到了很多关于这个问题的帖子，但是没有从这个问题中克服。

下面是我的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 {}

你能给我指出正确的方向吗？

Answer 1

您将在您的示例url中看到，一旦得到404错误，就无法使其工作，但如果在之前包含一个散列()特定于角的url (如/#latest )，它将工作。

为什么在提神时停止工作？您的GET服务器正在拦截浏览器中的GET请求，并试图直接转到不存在的目录/latest。它不知道它是否需要转到/bosv2，找到一个有角度的应用程序，然后在路径中添加一个小的结束位，这是一个非真实的目录，而是一个角的路由。在您的本地，它将工作，当您正在做ng服务，webpack网络服务器是为此做好准备，但不是主机，您的主机，您的应用程序。

默认情况下，angular使用的是HTML5样式的导航，但是对于当前的need服务器设置，您将需要旧的angularjs样式(带有hash#)。

从这里开始，您有两种解决方案

1. 更改您的your服务器配置
2. 告诉角使用HashLocationStrategy (完全有效的解决方案)，您可以通过在对象中提供useHash: true作为RouterModule.forRoot在AppModule中的第二个参数，从而对AppModule进行旧式处理。 @NgModule({进口：.RouterModule.forRoot(路由，{ useHash: true }) // ./#/最新/，.

我想说，散列样式有一些的缺点--，这在您的场景中可能与此无关：

1. 它不会产生干净和SEO友好的URL，更容易让用户理解和记住。
2. 您不能利用服务器端呈现。

希望你发现这个答案有帮助:)

Answer 2

为了避免使用散列路由，您必须正确地编辑best服务器配置，这是最好的解决方案。您只需将其配置为回退到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>

GitHub Pages

您不能直接配置它，但是可以添加404页。将index.html复制到同一目录中的404.html中，或添加符号链接：ln -s index.html 404.html。

防火墙托管

添加重写规则。

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

来源：https://angular.io/guide/deployment#server-configuration

Answer 3

使用.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>