angular6 - 刷新页面会导致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 {}

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

最佳答案

您将在示例网址中看到，一旦收到404错误，就无法使其正常工作，但是如果在之前包含一个哈希，则特定于 Angular 网址(例如/#latest)将起作用。

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

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

在这里，您有两种解决方案:

更改您的Web服务器配置

告诉Angular使用HashLocationStrategy(完全有效的解决方案)，您可以通过在对象中提供useHash: true作为AppModule中RouterModule.forRoot的第二个参数来使用HashLocationStrategy进行学习。

@NgModule({
进口:[
...
RouterModule.forRoot(routes，{useHash:true})// ... /＃/ latest /
]，
...

我想说的是，散列样式具有的缺点，这在您的情况下可能不相关:

它不会产生易于用户理解和记住的干净且SEO友好的URL。

您不能利用服务器端渲染。

希望这个答案对您有帮助:)

关于angular6 - 刷新页面会导致404错误-Angular 6，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50907736/