angular маршрутизация не работает при обновлении браузера

Question

в моем файле app.routing.ts у меня есть:

....{path:'', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: HomeComponent}.....

, когда я впервые запускаю приложение, оно правильно загружает мою домашнюю страницу, и у меня есть URL-адрес http://localhost: 50001 / home

Если я нажму кнопку refre sh в браузере, URL-адрес не изменится, но я получу пустую страницу.

Если я изменю один из Указанные выше пути маршрутизации должны быть:

 {path:'', component: HomeComponent }

в обоих случаях, т.е. при начальной загрузке и обновлении браузера sh, я получаю домашнюю страницу, но URL-адрес становится http://localhost: 50001 Как Могу ли я заставить его сохранить часть / home на URL-адресе

в соответствии с запросом @pc_coder:

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { MessageComponent } from './message/message.component';
import { MaintainDataExportComponent } from './data-export/maintain-data-export.component';
import { DefineDataRetentionComponent } from './define-data-retention/define-data-retention.component';
import { MaintainAgentsComponent } from './agents/maintain-agents.component';
import { MaintainSuppliersComponent } from './agents/maintain-suppliers.component';
import { MaintainDtnAutomationComponent } from './dtn-automation/maintain-dtn-automation.component';
import { MaintainSscsComponent } from './sscs/maintain-sscs.component';
import { DeleteHalfHourlyDataComponent } from './delete-half-hourly-data/delete-half-hourly-data.component';
import { DeleteInvalidAppointmentsComponent } from './delete-invalid-appointments/delete-invalid-appointments.component';
import { MaintainSccLoadControlComponent } from './ssc-load-control/maintain-ssc-load-control.component';

import { MaintainDataExportResolver } from '../services/resolvers/maintain-data-export.resolver';
import { MessageResolver } from '../services/resolvers/message.resolver';
import { MaintainAgentsResolver } from '../services/resolvers/maintain-agents.resolver';
import { DataRetentionResolver } from '../services/resolvers/data-retention.resolver';
import { BusinessScenariosResolver } from '../services/resolvers/dtn-automation.resolver';
import { SscValuesResolver } from '../services/resolvers/ssc-values.resolver';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },

  {
    path: 'message',
    children: [
      {
        path: ':pipelineId',
        component: MessageComponent,
        resolve: {
          message: MessageResolver,
        },
      },
    ],
  },
  {
    path: 'maintain-agents',
    component: MaintainAgentsComponent,
    resolve: {
      agents: MaintainAgentsResolver,
    },
  },
  {
    path: 'maintain-suppliers',
    component: MaintainSuppliersComponent,
  },
  {
    path: 'maintain-data-export',
    component: MaintainDataExportComponent,
    resolve: {
      exportTypes: MaintainDataExportResolver,
    },
  },
  {
    path: 'maintain-dtn-automation',
    component: MaintainDtnAutomationComponent,
    resolve: {
      scenarios: BusinessScenariosResolver,
    },
  },
  {
    path: 'maintain-ssc',
    component: MaintainSscsComponent,
    resolve: {
      sscs: SscValuesResolver,
    },
  },
  {
    path: 'delete-half-hourly-data',
    component: DeleteHalfHourlyDataComponent,
  },
  {
    path: 'delete-invalid-appointments',
    component: DeleteInvalidAppointmentsComponent,
  },
  {
    path: 'define-data-retention',
    component: DefineDataRetentionComponent,
    resolve: {
      retentionTypes: DataRetentionResolver,
    },
  },
  {
    path: 'maintain-ssc-load-control',
    component: MaintainSccLoadControlComponent,
    resolve: {
      sscs: SscValuesResolver,
    },
  },
  { path: '**', redirectTo: 'home' },

];

export const AppRouting = RouterModule.forRoot(routes, {
  preloadingStrategy: PreloadAllModules,
});