angularroutespage-refresh

How can I prevent 404 not found error in Angular when I refresh page?


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 {
}

Solution

  • Just use angular's HashLocationStrategy.

    RouterModule.forRoot(routes, {useHash: true});