I’m facing an issue with routing in my Angular application. When I directly copy and paste a URL into the browser (e.g., https://myapp.dev/material-details/bd3d31dd-945a-4faf-a888-be43204d6a85/attributes), it sometimes redirects to the root of the application (https://myapp.dev) instead of navigating to the intended route ( material-details).

This works properly via routeLink _router.navigate

Here’s an example of my route configuration and ngModule of app.module:

const ROUTES: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'material-details/:id', loadChildren: () => import('./material-details/material-details.module').then(m => m.MaterialDetailsModule) },
  { path: '**', redirectTo: 'dashboard', pathMatch: 'full' }
];


@NgModule({
  declarations: [
    AppComponent,
    ReserveMaterialComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    DashboardModule,
    BlockUIModule.forRoot({
      delayStart: 300,
      delayStop: 0
    }),
    ToastrModule.forRoot({
      timeOut: 10000,
      positionClass: 'toast-bottom-right',
      closeButton: true,
      enableHtml: true
    }),
    SharedModule,
    RouterModule.forRoot(ROUTES, { useHash: true })
  ],
  exports: [RouterModule],
  providers: [PageService, GroupService, SortService],
  bootstrap: [AppComponent]
})
export class AppModule { }

the custom module :

imports: [
        RouterModule.forChild([
            {
                path: '', component: MaterialDetailsComponent,
                children: [
                    { path: 'attributes', component: DynamicTabComponent },
                    // { path: 'documents', component: DynamicTabComponent },
                    { path: '', redirectTo: 'attributes', pathMatch: 'full' },
                    { path: '**', redirectTo: 'attributes', pathMatch: 'full' }
                ]
            }
        ]),
        SharedModule,
        HttpClientModule
    ],

What I’ve Tried:

1. Verified that RouterModule.forRoot(ROUTES, { useHash: true }) is
   properly configured.
2. Tried using both useHash: true and useHash:
   false with no success.
3. Checked for any canActivate guards that might
   be interfering.
4. Compared with another project where direct URL
   navigation works fine, but couldn’t identify significant
   differences.

What could be causing this behavior, and how can I ensure that the correct component loads when a user navigates directly to a URL?