刷新页面会导致 404 错误 - 角度 6 - refreshing the page results in 404 error- Angular 6 小贝子编程网

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

下面是我的应用程序.模块.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 {}

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

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

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

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

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

更改您的网络服务器配置
告诉 Angular 使用 HashLocationStrategy(完全有效的解决方案)，您可以通过在对象中提供useHash: true作为 AppModule 中 RouterModule.forRoot 的第二个参数来使用老派的 HashLocationStrategy。

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

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

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

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

为避免使用散列路由，您必须正确编辑 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

恩金克斯

在地址块中使用try_files

try_files $uri $uri/ /index.html;

二世

向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 页面

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

火力基地托管

添加重写规则。

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

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

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

In app.module.ts

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

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

{provide: LocationStrategy, useClass: HashLocationStrategy}

前任：

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

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

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

dist将文件添加到assetsangular.json中，在构建目录中加载.htaccess

文件

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

我认为您正在获得 404，因为您请求的 http://localhost/route 在 tomcat 服务器上不存在。由于 Angular 2 默认使用 html 5 路由，而不是在 URL 末尾使用哈希，因此刷新页面看起来像是对不同资源的请求。

在 tomcat 上使用角度路由时，您需要确保服务器在刷新页面时将应用程序中的所有路由映射到主索引.html。有多种方法可以解决此问题。无论哪一个适合你，你都可以选择。

1)将以下代码放在部署文件夹的web.xml中：

<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>

2)您也可以尝试在路由的URL中使用带有#的HashLocationStrategy：

尝试使用：

RouterModule.forRoot(routes， { useHash： true })

而不是：

RouterModule.forRoot(routes)

使用HashLocationStrategy，您的网址将如下所示：

http://localhost/#/route

3) Tomcat URL 重写阀：如果未找到资源.html则使用服务器级配置重写 url 以重定向到索引。

3.1)在META-INF文件夹中创建一个文件上下文.xml并在其中复制以下上下文。

<? xml version='1.0' encoding='utf-8'?>
<Context>
<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Context>

3.2)在WEB-INF中，创建文件rewrite.config(该文件包含URL重写规则，由tomcat用于URL重写)。在 rewrite.config 中，复制以下内容：

RewriteCond %{SERVLET_PATH} ！-f

重写规则 ^/(.*)$/index.html [L]

从 Apache 2.4 开始，您可以使用 FallbackResource 指令而不是重写，因此它看起来像：

FallbackResource /index.html

如果您有不同的基本 href(例如/awesomeapp)，请将其更改为：

<Location /awesomeapp>
FallbackResource /awesomeapp/index.html
</Location>

如果您使用的是cpanel，那么很容易解决此问题。

转到高级选项

步骤1：转到错误页面。

第 2 步：复制索引.html代码并将其粘贴到 404.shtml 中。

从技术上讲，您的所有路由都被重定向到index.html文件。这就是角度想要:)一切都会正常工作。

以下是一些参考链接

名称便宜错误页面配置

戈达迪错误页面配置

就我而言，我做了以下事情

方法 1 ：

在你的app.module.ts导入下面的东西

import { HashLocationStrategy, LocationStrategy } from '@angular/common';
@NgModule({
declarations: [...],
imports: [...],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [AppComponent]
})

并构建

ng build --base-href/[PROJECT_NAME]/

方法2 ：

对于nginx，

nano/etc/nginx/sites-available/default

在位置块中添加以下行

location /[PROJECT_NAME] {
try_files $uri $uri/ /[PROJECT_NAME]/index.html;
}

sudo service nginx restart

并构建

ng build --base-href/[PROJECT_NAME]/

在同一 URL 导航上重新获取数据

imports： [RouterModule.forRoot(routes， { onSameUrlNavigation： 'reload' })]，

创建一个.htaccess文件并添加此代码; 路由将开始工作：

RewriteEngine On

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html

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

相关内容

最新更新

热门标签：