How to correctly setup auxiliary routes in Angular 6?

Question

I'm having an issue with routing in Angular 6. My app has a side menu on the right side, that updates as users navigate on the left-hand side of the page. This side menu doesn't show on the user-dashboard where the users projects are listed. It needs to show when the user selects a project and thus navigates to the project-home.

The organization can be seen in the image below. Once the user gets to project-home they should see the master/detail flow from elements-list to element-detail on the left-hand-side. Independently, under activities on the right-hand-side, a user should be able to click through the tabs for images, notes, and tasks.

Update: Here is a Stackblitz illustrating the issue: https://stackblitz.com/edit/zsoflin-routing

I'm at a loss, and would appreciate any direction on how to structure my routes. Thank you. -Zach

app-routing.module.ts

`
const routes: Routes =[
  { path: 'user-dashboard', component: UserDashboard },
  { path: '', redirectTo: 'user-dashboard', pathMatch: 'full' },
  {
    path: 'project/:projectId',
    component: ProjectHomePage, 
    children:[
        {path: '', component: ElementsPage, pathMatch: 'full'},
        {path: 'element/:elementId', component: ElementPage, pathMatch: 'full'},
        {path: 'edit/:categoryId', component: EditFormPage, pathMatch: 'full'},
        {path: 'act', component:ActivitiesPage, 
            children: [
                {path:'images',outlet:'images',component: ImagesPage},
                {path:'notes',outlet:'notes',component: NotesPage},
                {path:'tasks',outlet:'tasks',component: TasksPage}
            ]
        },
    ]
  }
]
`

project-home.page.html

<ion-split-pane when="md">
<ion-menu type="push" menu-id="activityMenu" side="end" id="menucontent">
    <ion-router-outlet stack name="act"></ion-router-outlet>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

activities.page.html

<ion-tabs style="margin-top:56px;">
  <ion-tab label="Images" href="(images:images)">
    <ion-router-outlet name="images"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Notes" href="/tabs/(notes:notes)">
    <ion-router-outlet name="notes"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Tasks"" href="/tabs/(tasks:tasks)">
    <ion-router-outlet name="tasks"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Answer 1

I would do it like this

AppModule:

const routes: Routes =[
  { path: 'user-dashboard', component: UserDashboard },
  { path: '', redirectTo: 'user-dashboard', pathMatch: 'full' },
  {
    path: 'project',
    loadChildren: 'path.to.this.module#ProjectModule'
  }
];

ProjectModule:

const routes: Routes = [
  {
    path: '',
    component: 'ElementsPage' // If you really want the ProjectHomePage place here
  },
  {
    path: ':elementId',
    component: ElementPage
  },
  {
    path: ':categoryId/edit', // or 'edit/:categoryId'
    component: EditFormPage
  },
  {
    path: 'act',
    loadChildren: 'path.to.this.module#ActivityModule'
  }
];

ActivityModule:

const routes: Routes = [
  { path:'images', outlet:'images', component: ImagesPage },
  { path:'notes', outlet:'notes', component: NotesPage },
  { path:'tasks', outlet:'tasks', component: TasksPage }
];

Update: Your routes is working fine, you need now to route your outlet. Put your outlets nested your AppModule and in you app.component.ts you call:

ngOnInit() {
    this.router.navigate([{ outlets: { outletName: ['navigatingPath'] } }]);
  }

Them your outlets will show in like a popup. For more info how to do it, here is the main guide.

If you are trying to adding a sub menu in the right side, this is a strutural page called sidenav. I suggest you to add it in the main tree and show/hide when needed. See here, here and here