I have an Angular project and when I upload it on a global server it returns me a 404 not found error when I refresh the page. How can I prevent this?
That's my routing.component.ts
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ECommerceComponent } from './e-commerce/e-commerce.component';
import { NotFoundComponent } from './miscellaneous/not-found/not-found.component';
import { createFalse } from 'typescript';
const routes: Routes = [
{
path: '',
component: PagesComponent,
children: [
{
path: 'dashboard',
component: ECommerceComponent,
},
{
path: 'iot-dashboard',
component: DashboardComponent,
},
{
path: '',
redirectTo: 'iot-dashboard',
pathMatch: 'full',
},
{
path: '**',
component: NotFoundComponent,
},
],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PagesRoutingModule {
}
Just use angular's HashLocationStrategy.
RouterModule.forRoot(routes, {useHash: true});