Angular 6 routing issue with deployment to Apache (URL not found 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.

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

Your .htaccess should redirect every incoming request to index.html. — user4676340
– user4676340, Commented Aug 8, 2018 at 7:22
Hi, Thanks. I'm on Windows and can't see an .htaccess file in the Apache folders. could you provide an example of how do do this please? — Mark Beynon
– Mark Beynon, Commented Aug 8, 2018 at 7:38
I'm sorry I can't, I know the answers but don't know how to apply them (mostyle because I have never used Apache). A quick google search will explain it to you : alvinpoh.com/… — user4676340
– user4676340, Commented Aug 8, 2018 at 7:39

Mark Beynon · Accepted Answer · 2018-08-08 09:24:50Z

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>

answered Aug 8, 2018 at 9:24

Mark Beynon

2651 gold badge3 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RobC · Accepted Answer · 2019-12-20 13:53:53Z

1

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.

edited Dec 20, 2019 at 13:53

RobC

25.3k21 gold badges87 silver badges88 bronze badges

answered Dec 20, 2019 at 13:10

cuniquek87

212 bronze badges

Collectives™ on Stack Overflow

Angular 6 routing issue with deployment to Apache (URL not found 404)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related