Angular 6: How can I route to both component & featureModule at the same time?

3
votes

What I'm trying to accomplish:
I have multiple nested feature modules.

AppModule
-- DashboardModule
----- DashboardReportsModule

On path 'dashboard', I want to redirect the user to 'dashboard/reports' (the main view of the dashboard), while loading a DashboardComponent from DashboardModule which contains some layout html, other shared components & another router-outlet element (with name="dashboard-main-outlet").
The second router-outlet should then load the DashboardReportsComponent from DashboardReportsModule (which will contain some other components & html...).
*The second router-outlet should be the one to change when navigating to other inner paths (e.g. 'dashboard/settings','dashboard/...') while keeping the DashboardComponent layout in place.

How I tried to do that:
From the root app, on path named 'dashboard' I'm routing to DashboardModule like that (PageNotFoundComponent is a shared 404 component):

src/app/app-routing.module 
...
{
  path: 'dashboard',
  loadChildren: './dashboard/dashboard.module#DashboardModule'
},
...

Then, on DashboardRoutingModule, I added this:
src/app/dashboard/dashboard-routing.module.ts

...
{
  path: '',
  pathMatch: 'full',
  component: DashboardComponent,
  redirectTo: 'reports'
},
{
  path: '',
  children: [
    {
      path: 'reports',
      loadChildren: './dashboard-reports/dashboard-reports.module#DashboardReportsModule',
      outlet: 'dashboard-main-outlet'
    }
  ]
},
{ path: '**', component: PageNotFoundComponent }
...

This is the template of DashboardComponent (where the second router-outlet lives, the main one is placed in the AppComponent template):

src/app/dashboard/dashboard.component.html

<h1 class="title">Welcome to the Dashboard!</h1>
<router-outlet name="dashboard-main-outlet"></router-outlet>

The result:
When browsing to 'dashboard' I'm redirected to 'dashboard/reports' & get the 404 message.
On the other hand, when I remove the outlet: 'dashboard-main-outlet', I see the content of the DashboardReportsComponent, but without the <h1> from the DashboardComponent (It's loaded into the main router-outlet).

What am I doing wrong?
Any suggestion would do.
2
angularangular2-routingangular-routingangular6

2 Answers

1
votes

see the commented line 

   ...
    {
       path: '',
       component: DashboardComponent,
       redirectTo: 'reports'    // just this is the change i think for proper redirection
    },
    {
      path: '',
      children: [
        {
          path: 'reports',
          loadChildren: './dashboard-reports/dashboard-reports.module#DashboardReportsModule',
          outlet: 'dashboard-main-outlet'
        }
      ]
    },
    { path: '**', component: PageNotFoundComponent }
...
1
votes

UPDATE:
Eventually, I after reading the entire official Angular docs about "Routing & Navigation", I found out that their example of "child routes" was very clear & it helped we to reorganize my feature modules & route correctly.


src/app/dashboard/dashboard-routing.module.ts
...
{
  path: '',
  component: DashboardComponent,
  children: [
    {
      path: 'reports',
      loadChildren: './dashboard-reports/dashboard-reports.module#DashboardReportsModule'
    },
    {
      path: '',
      pathMatch: 'full',
      redirectTo: 'reports'
    },
    { path: '**', component: PageNotFoundComponent }
  ]
},
...

While the Dashboard's main component looks like:
src/app/dashboard/dashboard.component.html

<h1 class="title">Welcome to the Dashboard!</h1>
<router-outlet></router-outlet>

The result:
When browsing to 'dashboard' I'm redirected to 'dashboard/reports', there I can see both the H1 tag from the DashboardComponent & the contents of the DashboardReportsComponent under it's router-outlet.
Problem solved!