Angular Child Routes Navigable without Parent Route

Try putting the child routes within the children.

Child

@NgModule({
    declarations: [DashboardComponent],
    imports: [RouterModule.forChild(childRoutes)]})
export class ChildModule{}

export const childRoutes = [{
children:[
    {path: 'dashboard', component: DashboardComponent},
    {path: 'reports', component: ReportsComponent}]
}];

Parent

export const appRoutes = [
    {path: 'store', component: StoreLayoutComponent,
     loadChildren: () => import('app/store/child.module').then(m => m.ChildModule)}];

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

The issue here was that the StoreModule was both being lazy loaded and appeared in the app.module.ts of the application. This created routes for the module both as a direct child of the app.module and also as a lazy loaded module at the correct address.

Removing the declaration of StoreModule from the imports statement of app.module.ts solved the problem.

Hopefully this helps someone in the future.