title: url of route goes back to default route with Angular
body: <p>I have angular 9 application.</p>
  <p>And I have some routes. I have a parent rout like this: http://localhost:4200/desktop</p>
  <p>and now I have component where I want to go to: http://localhost:4200/desktop/testDesktop</p>
  <p>but if I want to go there in the browser it goes back to: http://localhost:4200/desktop</p>
  <p>So this is what I have:</p>
  <p>app.component.html</p>
  <pre><code> &lt;app-nav-bar&gt;&lt;/app-nav-bar&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>app.routing.module.ts:</p>
  <pre><code>
  const routes: Routes = [
    {
      path: 'mobile', loadChildren: () =&gt;
        import('../app/mobile-dashboard/mobile-dashboard.module').then(m =&gt; m.MobileDashboardModule)
    },
    {
      path: 'desktop', loadChildren: () =&gt;
        import('./desktop-dashboard/desktop-dashboard.module').then(m =&gt; m.DesktopDashboardModule),
  
    },
    {
      path: 'autologin',
      component: AutoLoginComponent
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  </code></pre>
  <p>and</p>
  <p>desktop.routing.module.ts:</p>
  <pre><code>const routes: Routes = [
    { path: '', component: DesktopDashboardComponent },
    { path: 'desktop/testDesktop', component: TestDesktopComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class DesktopRoutingModule {}
  </code></pre>
  <p>and desktop.dashboard.module.ts:</p>
  <pre><code>@NgModule({
    declarations: [DesktopDashboardComponent, BarChartComponent, TestDesktopComponent],
    imports: [
      CommonModule,
      SharedModule,
      DragDropModule,
      MatCardModule,
      MatGridListModule,
      DesktopRoutingModule
    ],
    exports: [TestDesktopComponent]
  })
  </code></pre>
  <p>and desktop.dashboard.html I added this:</p>
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>but so it doens't go to:</p>
  <p>http://localhost:4200/desktop/testDesktop</p>
  <p>So what I have to change?</p>
  <p>Thank you</p>
  <p>and</p>
  <p>app.modulet.ts looks like this:</p>
  <pre><code>export function configureAuth(oidcConfigService: OidcConfigService) {
    return () =&gt;
      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 {}
  </code></pre>