Question

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './public/home/home.component';

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: '../app/customers/customers.module#CustomersModule'
  },
  {
    path: 'admin',
    loadChildren: '../app/admin/admin.module#AdminModule'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: '**',    
    redirectTo: 'home',    
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在开发环境下，它们可以正常工作。如果我直接打开localhost:4200/home，则它将降落在预期的页面上。

但是，如果我直接打开ng build --prod --base-href=/myngapp/，则与www.domain.com/myngapp一起使用的内置和部署的只能在www.domain.com/myngapp/home上使用，则显示404未找到错误。

Answer 1

您需要设置正确的URL重写规则。 Angular docs解释了如何对大多数流行的http服务器执行此操作。您可以在此处找到详细信息。

https://angular.io/guide/deployment#production-servers

它的作用是简单地告诉服务器，无论请求的路径是什么，它始终提供index.html。例如。

www.domain.com/myngapp/home->提供index.html，而不是home.html或类似的东西 www.domain.com/myngapp/some/child/routing->提供index.html，不要试图找到some / child / routing.html或php等。

Answer 2

您必须配置HTTP服务器（apache，Nginx或其他服务器），以将以www.domain.com/myngapp/**开头的所有URI重定向到index.html文件。

请注意，通过与按钮和菜单的交互在“ Angular内部”访问应用程序（https://angular6demoamit.000webhostapp.com/）的路由时，它们可以正常工作。但是，当您尝试访问在浏览器上直接键入的路由时，服务器不知道URI https://angular6demoamit.000webhostapp.com/home是Angular应用程序的路由。可能会尝试加载不存在的主目录的索引页。

没有一种配置可以解决您的问题。这将取决于您的HTTP服务器和基础结构。阅读angular指南，其中介绍了一些HTTP服务器的一些配置示例：https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml。

Answer 3

我有同样的问题。如果它在本地主机上工作正常，则应尝试此解决方案。也许在.htaccess文件中添加URL重写规则可以解决您的问题。我发现了 http://joeljoseph.net/angular-6-deploy-on-apache-server-by-solving-404-not-found-error-on-page-refresh/

将此添加到您的.htaccess文件中。

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]

有关更多详细信息，请访问http://joeljoseph.net/angular-6-deploy-on-apache-server-by-solving-404-not-found-error-on-page-refresh/

Answer 4

如果将文件复制到服务器子文件夹中，请附加构建标记--base-href 例如，如果您在服务器/myngapp/index.html上有index.html文件，则添加带有build --base-href = / myngapp /的命令，否则复制所有dist文件并粘贴到没有base-href的服务器上。

Answer 5

作为参考，我使用的是Busybox httpd，并且httpd.conf中的以下内容运行得很好

E404:index.html

这意味着在出现404错误时发送index.html。当我直接转到路径时，它实际上将页面加载到该路径中。我期望它仅显示索引页，但它会自动导航到url中的路径。

我正在使用Angular 9

https://git.busybox.net/busybox/tree/networking/httpd.c

Answer 6

如果可以通过设置 htaccess 文件来修复。我们假设我们的单页应用程序正在服务器上的一个子目录中运行。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /   
 
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d 
 
  # Rewrite everything of to index.html
  RewriteRule ^sub_folder/(.*)$  sub_folder/index.html  [NC,L]                             
</IfModule>

说明：我们假设该应用程序位于 /sub_folder 中。我们将 htaccess 配置为重定向到包含 sub_folder 的任何 url 的 index.html 文件。愿它帮助某人。

Answer 7

尝试使用：

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: '../app/customers/customers.module#CustomersModule'
  },
  {
    path: 'admin',
    loadChildren: '../app/admin/admin.module#AdminModule'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: '**',    
    redirectTo: 'home',    
  }
];

imports: 
RouterModule.forRoot(routes, {useHash: true})

部署在子目录中时，Angular 6路由路径不适用于直接URL

7 个答案: