Reputation: 439
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.
...
{
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).
Upvotes: 3
Views: 1080
Reputation: 439
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.
...
{
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!
Upvotes: 1
Reputation: 21
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 }
...
Upvotes: 1