url of route goes back to default route with Angular

Question

I have angular 9 application.

And I have some routes. I have a parent rout like this: http://localhost:4200/desktop

and now I have component where I want to go to: http://localhost:4200/desktop/testDesktop

but if I want to go there in the browser it goes back to: http://localhost:4200/desktop

So this is what I have:

app.component.html

 <app-nav-bar></app-nav-bar>
<router-outlet></router-outlet>

app.routing.module.ts:

const routes: Routes = [
  {
    path: 'mobile', loadChildren: () =>
      import('../app/mobile-dashboard/mobile-dashboard.module').then(m => m.MobileDashboardModule)
  },
  {
    path: 'desktop', loadChildren: () =>
      import('./desktop-dashboard/desktop-dashboard.module').then(m => m.DesktopDashboardModule),

  },
  {
    path: 'autologin',
    component: AutoLoginComponent
  }
];

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

and

desktop.routing.module.ts:

const routes: Routes = [
  { path: '', component: DesktopDashboardComponent },
  { path: 'desktop/testDesktop', component: TestDesktopComponent }
];

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

and desktop.dashboard.module.ts:

@NgModule({
  declarations: [DesktopDashboardComponent, BarChartComponent, TestDesktopComponent],
  imports: [
    CommonModule,
    SharedModule,
    DragDropModule,
    MatCardModule,
    MatGridListModule,
    DesktopRoutingModule
  ],
  exports: [TestDesktopComponent]
})

and desktop.dashboard.html I added this:

<router-outlet></router-outlet>

but so it doens't go to:

http://localhost:4200/desktop/testDesktop

So what I have to change?

Thank you

and

app.modulet.ts looks like this:

export function configureAuth(oidcConfigService: OidcConfigService) {
  return () =>
    oidcConfigService.withConfig({
      stsServer: 'http://localhost:4430',
      redirectUrl: window.location.origin,
      clientId: 'crowd-dashboard',
      scope: 'openid profile dashboard-api ',
      responseType: 'code',
      postLogoutRedirectUri: window.location.origin,
      unauthorizedRoute: '/unauthorized'
    });
}

@NgModule({
  declarations: [AppComponent, NavBarComponent],
  imports: [
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    DragDropModule,
    MatCardModule,
    MatGridListModule,
    MatProgressSpinnerModule,
    MatCheckboxModule,
    MatIconModule,
    DesktopDashboardModule,
    MobileDashboardModule,
    AuthModule.forRoot(),
    BsDropdownModule.forRoot()
  ],
  providers: [
    OidcConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: configureAuth,
      deps: [OidcConfigService],
      multi: true
    },
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

You child route must be a relative route. The parent already indicates to go to /desktop.

Your child routes should be:

const routes: Routes = [
  { path: '', pathMatch: 'full', component: DesktopDashboardComponent },
  { path: 'testDesktop', component: TestDesktopComponent }
];

Note that I also added a pathMatch: 'full' for your empty path, because otherwise other routes will be ignored.

Working StackBlitz