Angular Router, dynamic argument not leting above routes work

Question

im trying to make a page that expect and argument but if i put it bellow other route (eg:login) it does not open anymore instead it opens the dynamic route, and the page its needed to be: www.website/dynamic-name what could be causing the error?

App routing

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
...

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
  { path:'login', component: LoginComponent },//--> this one does not open login page, but instead open the below "PharmacyDetailsComponent "
  { path: ':name', component: PharmacyDetailsComponent } , //--> this one opens 

but login page does not open ];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, enableTracing: false,  useHash: true })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

calling the page

goToSupplierDetail(supplierName: string) {
        this.router.navigate([`${supplierName}`],{...});
 }

Answer 1

I think you are trying to navigate to the dynamic page on other pages such as home or login. So you should use the absolute path. Add / before the route path.

this.router.navigate([`/${supplierName}`]);

Let me know if it works. Otherwise, you can use relative path.

...
constructor(private route: ActivatedRoute) {}
...
this.router.navigate([`../${supplierName}`], { relativeTo: this.route });