I have made an Angular app which I'm running on a apache2 server. Everything runs well locally but in apache I'm stuck on the "root/login" page. I'm seeing that it send a request to the backend to login but it does not get routed to the "home" page. I've used a # hash in the URL since I've read that this would fix the issue. I have also tried to activate the symlinks in apache sites enables config but no luck.
I use ng build --prod to build the app and paste the files from the dist folder to var/www/html for apache. The login page gets rendered well but it does not go to the home page. It just stays on the login page and I get no errors.
My angular routing module:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { LoginComponent } from './components/welcome/login/login.component';
import { RegisterComponent } from './components/welcome/register/register.component';
import { HomeComponent } from './components/home/home.component';
import { AuthGuard } from './auth/auth.guard';
const routes: Routes = [
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
{ path: '', component: WelcomeComponent, pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
My apache2 000-degault.conf file:
<VirtualHost *:80>
# The ServerName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request's Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
#ServerName www.example.com
#ServerAdmin webmaster@localhost
#DocumentRoot /var/www/html
DocumentRoot /var/www/html
# redirect 404 to index page
ErrorDocument 404 /index.html
Options +FollowSymLinks
#RewriteEngine on
ProxyPreserveHost On
ProxyPass /api http://127.0.0.1:8080/
ProxyPassReverse /api http://127.0.0.1:8080/
# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn
<Directory /var/www/html>
options Indexes FollowSymLinks MultiViews
AllowOverride All
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with "a2disconf".
#Include conf-available/serve-cgi-bin.conf
</VirtualHost>
Is there something I need to fix in Apache or Angular?
