How can I reload same page on Angular when I refresh page?

Question

I have an angular project saved on a server on a file named 'final' on a server. When I have the path https://www.SOMETHING.gr/rscheme/final it redirects me to https://www.SOMETING.gr/rscheme/final/pages/iot-dashbord which is the page that I want. When I refresh my page it returns me "not found" beacause the path is https://www.SOMETING.gr/rscheme/final/pages/iot-dashbord. What should I do? I want to hide the path so the path to remain as https://www.SOMETHING.gr/rscheme/final

my routing.module.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';

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

my main.module.ts

    import {Component, OnDestroy, OnInit} from '@angular/core';

import {AppServices} from '../../services/rw.service'

@Component({
  selector: 'ngx-dashboard',
  styleUrls: ['./dashboard.component.scss'],
  templateUrl: './dashboard.component.html',
  providers: [AppServices]
})
export class DashboardComponent implements OnInit {

  report:number;
  park:number;
  use:number;
  group:number;
  privateplin:number;
  privateplus:number;
  commonprivateplus:number;
  ownerfirst:number;
  ownersecond:number;
  ownerthird:number;
  first:number;
  second:number;
  fin:any;
  constructor(private appService: AppServices){}
  ngOnInit() {
    this.appService.getJSON().subscribe(

      data=>{
           this.report=data.report
           this.park=data.park 
           this.use=data.use
           this.group=data.group
           this.privateplin=data.privateplin
           this.privateplus=data.privateplus
           this.commonprivateplus=data.commonprivateplus
           this.ownerfirst=data.ownerfirst
           this.ownersecond=data.ownersecond
           this.ownerthird=data.ownerthird
           this.first=data.first
           this.second=data.second
      },
      error => {
        window.alert("Δεν μπορούν να πρβληθούν οι ισχύοντες πόντοι");
      console.error(error);
      },
    );
  }

  set(preport,ppark,puse,pgroup,pprivateplin,pprivateplus,pcommonprivateplus,pownerfirst,pownersecond,pownerthird,pfirst,psecond){
        let report=preport.value;
        let park=ppark.value;
        let use=puse.value;
        let group=pgroup.value;
        let privateplin=pprivateplin.value;
        let privateplus=pprivateplus.value;
        let commonprivateplus=pcommonprivateplus.value;
        let ownerfirst=pownerfirst.value;
        let ownersecond=pownersecond.value;
        let ownerthird=pownerthird.value;
        let first=pfirst.value;
        let second=psecond.value;

        this.fin={
          "report":report,
          "park": park,
          "use": use,
          "group":group,
          "privateplin":privateplin,
          "privateplus":privateplus,
          "commonprivateplus":commonprivateplus,
          "ownerfirst":ownerfirst,
          "ownersecond":ownersecond,
          "ownerthird":ownerthird,
          "first":first,
          "second":second        
      };

      this.appService.postJSON(this.fin).subscribe(response=>{

        window.alert("Επιτυχής ανανέωση στοιχείων");


      },
      error => {
        
        console.error(error);
        
      },
      );


  }
  
}

Answer 1

This is because of how angular works. There will be only one index file and required view are loaded as needed. So when any other path is requested it will cause a 404 to be returned by the server (error) as it doesn't recognize the path "iot/dashboard".

So you need to configure the server to return index.html on 404s. Once index.html is loaded it will take care of loading as per the route. The actual configuration will depend on the server you use.

Please check deploying SPAs.