刷新页面导致 404 错误 - Angular 6 [英] refreshing the page results in 404 error- Angular 6

问题描述

我正在 Angular6 的帮助下构建应用程序，但遇到路由问题.当我点击特定标签时，所有路由都在工作，但是每当我刷新当前页面时，它都会抛出404错误.我在 Stack Overflow 上看到了很多关于这个问题的帖子，但未能解决这个问题.

I am building an application with the help of Angular6 and facing problems in routing. All the routes are working when I click on a particular tab but whenever I refresh the current page, it is throwing 404 error. I have seen many posts regarding this issue on Stack overflow but failed to overcome from this problem.

下面是我的 app.module.ts

Below is my 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 {}

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

Can you point me in right direction?

推荐答案

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

You will see in your example url, that once you get the 404 error you can't make it work, but if you include a hash before the angular-specific url like /#latest it will work.

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

Why stops working when refreshing? your webserver is intercepting the GET request from your browser and is trying to go directly to the directory /latest, which doesn't exist. It doesn't know that it needs to go to /bosv2, find an angular app, and then add the small ending bit to your path which is a not-real directory but a routing for angular. In your local it would work as when you are doing ng serve, webpack webserver is prepared for this, but not the host where you are hosting the app.

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

By default, angular is using HTML5 style navigation, but with your current webserver settings you would need the old angularjs style (with hash#).

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

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

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

1. Change your webserver configuration

2. Tell Angular to use HashLocationStrategy (perfectly valid solution), you can go old-school with the HashLocationStrategy by providing the useHash: true in an object as the second argument of the RouterModule.forRoot in the AppModule.

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

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

我认为采用散列样式有一些缺点，这可能与您的场景无关:

I would say going the hash style has a couple of downsides, which may not be relevant in your scenario:

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

希望你觉得这个答案有帮助:)

Hope you find this answer helpful :)

这篇关于刷新页面导致 404 错误 - Angular 6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！