Question

我正在 Angular6 的帮助下构建应用程序，并面临路由问题。当我点击特定标签时，所有路线都有效，但每当我刷新当前页面时，都会抛出 404 错误。我已经看到很多关于Stack溢出这个问题的帖子，但未能克服这个问题。

以下是我的app.module.ts

task singleJar(type: BootRepackage) {
  customConfiguration = "weavedRuntime"
}

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

Answer 1

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

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

默认情况下，angular使用 HTML5样式导航，但使用当前的网络服务器设置，您需要旧的angularjs样式（使用哈希＃）。

从这里开始，你有两个解决方案：

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

@NgModule（{ 进口：[ ... RouterModule.forRoot（routes，{useHash：true}）// ... /＃/ latest / ] ...

我会说散列样式有几个缺点，这可能与您的场景无关：

它不会产生干净且SEO友好的URL，方便用户理解和记忆。
您无法利用服务器端呈现。

希望您觉得这个答案有用：）

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

将.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中，方法是将其添加到assets中的angular.json

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

Answer 4

为避免使用散列路由，必须正确编辑Web服务器配置，这是最佳解决方案。您只需对其进行配置，使其回退到SELECT ROUND(SELECT AVG(price) FROM fake_apps, 2) FROM fake_apps;，这是Angular的引导程序。尽管没有通用配置，但是这里有一些：

Apache

向cd C:\\progects\\文件添加重写规则

index.html

Nginx

在您的位置信息块中使用.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

IIS

将重写规则添加到try_files

try_files $uri $uri/ /index.html;

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

Answer 5

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

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

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

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

2）您还可以尝试将HashLocationStrategy与路由的URL中的＃一起使用：

尝试使用：

RouterModule.forRoot（routes，{useHash：true}）

代替：

RouterModule.forRoot（路由）

使用HashLocationStrategy，您的网址将像：

http://localhost/#/route

3）Tomcat URL重写阀：如果找不到资源，则使用服务器级别的配置来重写URL，以重定向到index.html。

3.1）在META-INF文件夹中创建一个文件context.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

RewriteRule ^ /（。*）$ /index.html [L]

Answer 6

在app.module.ts

中

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

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

{provide: LocationStrategy, useClass: HashLocationStrategy}

例如：

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

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

Answer 7

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

方法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服务nginx重新启动

并使用

构建

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

Answer 8

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

导入：[RouterModule.forRoot（routes，{ onSameUrlNavigation：'reload'}）]，

Answer 9

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

FallbackResource /index.html

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

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

Answer 10

如果您使用的是cpanel，则可以轻松解决此问题。

转到高级选项

第1步：转到错误页面。

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

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

以下是一些参考链接

Namecheap Error Page Config

Godaddy Error Page config

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

10 个答案: