刷新页面会导致404错误 - Angular 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错误,您就无法使其工作,但如果您在特定于角度的网址之前包含哈希,就像/#latest它将起作用一样.

为什么在刷新时停止工作？您的网络服务器正在拦截您浏览器的GET请求,并尝试直接转到/latest不存在的目录.它不知道它需要去/bosv2,找到一个角度应用程序,然后将小结束位添加到您的路径,这是一个非真实的目录,但路由为角度.在你的本地,它可以像你在服务时一样工作,webpack webserver为此做好准备,但不是你主持应用程序的主机.

默认情况下,angular使用HTML5样式导航,但是使用当前的Web服务器设置,您需要使用旧的angularjs样式(使用hash#).

从这里,您有两个解决方案:

1. 更改您的Web服务器配置

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

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

我会说散列样式有一些缺点,这可能与你的场景无关:

1. 它不会产生易于用户理解和记忆的干净且SEO友好的URL.
2. 您无法利用服务器端呈现.

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

Answer 2

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

Answer 3

在 app.module.ts

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

导入后，将以下行添加到提供者。

{provide: LocationStrategy, useClass: HashLocationStrategy}

前任：

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

这将解决您的问题。在此处阅读文档。

Answer 4

为了避免使用哈希路由，您必须正确编辑Web服务器配置，这是最佳解决方案。您只需对其进行配置，以使其回index.html退到Angular的引导程序。尽管没有通用配置，但是这里有一些：

阿帕奇

向.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

Answer 5

将.htaccess文件添加到您的src文件夹。

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

通过将.htaccess文件dist添加到assetsin来加载构建目录中的文件angular.json

"assets": [
     "src/favicon.ico",
     "src/assets",
     "src/.htaccess"
],