Update two different router-outlet tags in an Angular 4 application.

In this markup, the first tag below is the primary router-outlet behaving as you'd expect and the named router-outlet is a second router-outlet.

<router-outlet></router-outlet>
<router-outlet name='myOutlet'></router-outlet>

 
 

Hit both of these at once at http://localhost:4200/#/whatever/foo/(myOutlet:13) with routes like so:

export const PlanRoutes: Routes = [
   {
      path: 'foo/',
      component: MyComponent,
      resolve: {
         'businessPlanningResolver': BusinessPlanResolverService
      },
      children: [{
         path: ':id',
         component: MyOtherComponent,
         outlet: 'myOutlet'
      }]
   }
];