刷新页面会导致 404 错误 - Angular 6

我正在构建一个应用程序的帮助Angular6并面临路由问题。一切routes当我单击特定选项卡时正在工作，但每当我refresh当前页面，它正在抛出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 {}

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

您将在示例网址中看到，一旦收到 404 错误，您就无法使其工作，但如果您之前包含一个哈希值特定于角度的 url，例如/#latest它会起作用的。

为什么刷新时停止工作？你的网络服务器正在拦截 GET来自您的浏览器的请求并尝试直接进入该目录/latest，它不存在。它不知道它需要去/bosv2，找到一个 Angular 应用程序，然后将小结尾位添加到您的路径中，该路径不是真实的目录，而是 Angular 的路由。在你的本地，它会像你在做 ng 服务时一样工作，webpack webserver 已经为此做好了准备，但不是你托管应用程序的主机。

默认情况下，角度正在使用HTML5风格导航，但是根据您当前的网络服务器设置，您将需要旧的 angularjs 样式（带有 hash#）。

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

1. 更改您的网络服务器配置

2. 告诉 Angular 使用 HashLocationStrategy （完全有效的解决方案），您可以通过提供旧式的 HashLocationStrategyuseHash: true作为 AppModule 中 RouterModule.forRoot 的第二个参数。

   @NgModule({ 进口：[ ... RouterModule.forRoot(routes, { useHash: true }) // .../#/latest/ ], ...

我想说的是，哈希风格有一个有几个缺点，这可能与您的场景无关：

1. 它不会生成更易于用户理解和记住的干净且 SEO 友好的 URL。
2. 您无法利用服务器端渲染。

希望这个答案对您有所帮助：）