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

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 那么它就会到达预期的页面。

但是，built 和 deployed using with ng build --prod --base-href=/myngapp/ do 仅适用于 www.domain.com/myngapp 如果我直接打开www.domain.com/myngapp/home，然后提示404 not found error.

Answer 1

如果将文件复制到服务器子文件夹，请附加构建标志 --base-href 就像你在服务器 /myngapp/index.html 上有 index.html 文件，然后使用 build --base-href=/myngapp/ 添加命令，否则复制所有 dist 文件并粘贴到没有 base-href 的服务器上.

Answer 2

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

注意您的应用程序的路由（https://angular6demoamit.000webhostapp.com/) works fine when they are accessed "inside Angular" by interaction with buttons and menus. However, when you try to access the route typing it directlly on the browser, the server doesn't know the URI https://angular6demoamit.000webhostapp.com/home 是 Angular 应用程序的路由。它可能会尝试加载不存在的主目录的索引页。

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

Answer 3

您需要设置适当的 URL 重写规则。 Angular 文档解释了如何为大多数流行的 HTTP 服务器执行此操作。您可以在此处找到详细信息。

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

它的作用，简单来说就是告诉服务器始终服务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 4

尝试使用：

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})

Answer 5

我有同样的问题。如果它在本地主机上工作正常，那么您应该尝试这个解决方案。也许在您的 .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 6

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

E404:index.html

表示出现404错误时发送index.html。当我直接转到路径时，它实际上会在路径中加载页面。我原以为它只显示索引页，但它会自动导航到 url.

中的路径

我正在使用 Angular 9

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

Answer 7

如果可以通过设置 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 文件。可能对某人有帮助。

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

Angular 6 route path not working for direct url when deployed in subdirectory

angular2-routing

angular