'Duplicated path after refresh

I'm facing the issue with duplicated path. For testing purpose I made a TestingComponent to demonstrate.

My code:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'testing',
    pathMatch: 'full'
  },
  {
    path: 'testing',
    component: TestingComponent
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }


@NgModule({
  declarations: [
    AppComponent,
    TestingComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,

  ],
  providers: [DatePipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

In app component html:


<router-outlet></router-outlet

The issue is specific for the project, when I made a new project everything works fine, but in this one:

When I enter localhost:4200 it redirects me to localhost:4200/testing (it is correct) When I refresh page it is redirecting me from localhost:4200/testing to localhost:4200/testing/testing (which is strange and it should not work like this).

I have already tried changing order of the routes but it not helped at all.

Solution 1:^[1]

You are navigating relatively. Prefix the url with a / to navigate absolutely.

A URL to redirect to when the path matches.

Absolute if the URL begins with a slash (/), otherwise relative to the path URL. >Note that no further redirects are evaluated after an absolute redirect.

When not present, router does not redirect.

  {
    path: '',
    redirectTo: '/testing',
    pathMatch: 'full'
  },

Solution 2:^[2]

It's working after adding 'pathMatch: 'full'',

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
  },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

https://stackblitz.com/edit/angular-ivy-jnaiij?file=src%2Fapp%2Fapp.routing.ts

Solution 3:^[3]

The problem was solved. Someone added baseHref in angular.json architect build options. Thanks for your help!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Get Off My Lawn
Solution 2	Siddhartha Mukherjee
Solution 3	Jeremy Caney

'Duplicated path after refresh

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]