i know this may be a duplicate but i didn't found any solution in other questions.
I've some troubles with angular routing in production. I tried many solutions, it only works with {useHash: true}
.
My last attempt was to set .htaccess in project's root and try different configurations.
My suspect is that aruba server is not well configured and doesn't fall back to index.html when routing is triggered. When i go to thearkexperience.studio/login
, server redirects me to https://admin.aruba.it/PannelloAdmin/Login.aspx
, this is very strange.
here is my code:
index.html has <base href="/">
app-routing.component.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {BodyComponent} from "./components/layout/home/body/body.component";
import {HomeComponent} from "./components/layout/home/home.component";
const routes: Routes = [
{
path: '',
loadChildren: () => import('./components/layout/home/home.module').then(m => m.HomeModule),
},
{
path: '**',
redirectTo: ''
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
home-routing.component.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {HomeComponent} from "./home.component";
import {BodyComponent} from "./body/body.component";
import {LoginMobileComponent} from "../../pages/custom/login_mobile/login_mobile.component";
import {LoginComponent} from "../../pages/custom/login/login.component";
import {Custom_1Component} from "../../pages/custom/custom_1/custom_1.component";
import {Custom_2Component} from "../../pages/custom/custom_2/custom_2.component";
import {Custom_3Component} from "../../pages/custom/custom_3/custom_3.component";
const routes: Routes = [
{
path: '',
children: [
{
path: 'login',
component: LoginComponent
},
{
path: 'm/login',
component: LoginMobileComponent
},
{
path: '',
component: BodyComponent
},
{
path: ':page',
component: BodyComponent
},
{path: '**', redirectTo: ''}
]
},
{path: '**', redirectTo: ''}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
.htaccess
Options +FollowSymLinks
IndexIgnore */*
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html
Angular applications are Single Page Applications (that is, they should always serve up one page only - namely index.html). Basically, you will find that if you click refresh on any route, you will get problems. This is because your webserver is trying to serve up /route when it should always serve index.html.
You need to configure your prod webserver to always serve index.html regardless of the route. How to do this varies from webserver to webserver.