部署到 Apache 的 Angular 6 路由问题（未找到 URL 404）

Question

I have a small Angular 6 app that works as expected when using 'ng serve' and localhost:4200. If I refresh a page or manually type a URL I get the expected results and the page loads.

However, when I build a distribution using 'ng build --base-href=/quickorder/' the app runs fine until I do a refresh or type the url in a tab wheen I get URL not found 404 with the URL being shown as the part after the servername.

The dist is placed in Apache's htdocs in a folder named quickorder and the URL is . The Apache conf file for the dist is basically standard apart from changing the SRVROOT to reflect Apache's location.

app.modules.ts

 const appRoutes:Routes = [
  {
    path: '',
    component: LoginComponent
  },  
  {
    path: 'order-input/:ref/:name',
    canActivate: [AuthguardGuard],
    component: OrderInputComponent
  },
  {
    path: 'order-input',
    canActivate: [AuthguardGuard],
    component: OrderInputComponent
  },  
  {
    path: 'trad-verify',
    canActivate: [AuthguardGuard],
    component: TradVerifyComponent
  },
  {
    path: '**',
    component: LoginComponent
  } 
 ]

Thanks for any help you can provide me,

Mark.

PS Looking at the Apache docs for 2.4 they recommend not using an .htaccess if you have access to httpd.conf and all .htaccess commands can go into the httpd.conf

<Directory />
   RewriteEngine On
   RewriteBase /quickorder
   # 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
   Options FollowSymLinks
   AllowOverride All
   #AllowOverride none
   #Require all denied
</Directory>

However, this gives me an error rresponse from the server; You don't have permission to access /cgi-bin/dugquickorder.cgi/wh on this server.

Answer 1

Solved. In Apache 2.4 an .htaccess file is not required (if you have access to httpd.conf). The changes can go inside a 'directory'

#
# Deny access to the entirety of your server's filesystem. You must
# explicitly permit access to web content directories in other 
# <Directory> blocks below.
#
<Directory />
    AllowOverride none
    Require all denied
</Directory>

<Directory C:\Apache\Apache24\htdocs\quickorder\>

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
    AllowOverride All
</Directory>

Answer 2

Refer the following link:

https://blog.neoprime.it/ng-in-httpd/

It helped to resolve the problem. I have not used any .htaccess file but have overridden httpd.conf .