Angular 8 Routing with Child routes in sub-modules

Question

In my application, I have a "parent" component (WorkspaceComponent) that defines the overall layout and performs some scaffolding for the app (Effectively it's a wrapper for the majority of the content). Ideally, I'd like this component to not take up any of the URL.

Each of the 'child' routes are defined within their own routing module.

Parent Route Configuration: (app-routing)

const routes: Routes = [
  {path: 'denied', component: DenialComponent},
  {path: 'workspace', component: WorkspaceComponent, children: [
      {path: 'search', loadChildren: () => import('./search/search.module').then(m => m.SearchModule)},
      {path: 'files', loadChildren: () => import('./files/files.module').then(m => m.FilesModule)},
      {path: 'folders', loadChildren: () => import('./folders/folders.module').then(m => m.FoldersModule)},
      {path: '', redirectTo:'search', pathMatch:'full'}
    ]},
  {path: '', redirectTo:'workspace', pathMatch:'full'}
];

Child Route Configuration - (search)

const searchRoutes: Routes = [{
  path: '', component: SearchComponent, children: [
    {path: 'new', component: SearchEditComponent, pathMatch:'prefix'},
    {path: 'edit/:queryId', component: SearchEditComponent, pathMatch:'prefix'},
    {path: 'convert/:queryId', component: SearchConvertComponent, pathMatch:'prefix'},
    {path: 'details/:queryId', component: SearchDetailsComponent, pathMatch:'prefix'},
    {path: '', redirectTo: 'new', pathMatch: 'full'}
  ],
  runGuardsAndResolvers: 'always'
}];

The other 'child' routes (files & folders) pretty much mimic the searchRoutes configuration.

The main issue I'm facing and need some help with is:

• For the parent component path ('workspace'), if I use ' ' as the path instead of 'workspace' I'd expect the actual workspace to load, but instead one of the child routes gets loaded

How can I set up my routing so that:

• I can navigate to http://localhost:8080/search and have the parent component (WorkspaceComponent) also get loaded without having to have 'workspace' in the URL?
• A user can navigate to the root URL of the application (i.e. http://localhost:8080) and it would automatically route to http://localhost:8080/search (assuming we can do this without having to specify 'workspace' in the path)

Answer 1

So, it appears the order of imports in the app.module.ts file was affecting the way my app was loading. I had the AppRoutingModule listed below my other component routing modules. Ugh!