Load multiple component in the same router-outlet

I have the following template for the root component of my angular2 app:

<main class="main">
  <div class="main__container">
    <div class="main__left-area">
      <router-outlet name="left-zone"></router-outlet>
    </div>
    <div class="main__right-area">
      <router-outlet name="right-zone"></router-outlet>
    </div>
  </div>
</main>

And the following routes:

import { HomeSummaryComponent } from "../components/home-summary/home-summary.component"
import { DataSummaryComponent } from "../components/data-summary/data-summary.component"
import { AskSummaryComponent } from "../components/ask-summary/ask-summary.component"

import { Routes } from "@angular/router"

export const AppRoutes: Routes = [
  {
    path: "",
    component: HomeSummaryComponent,
    outlet: "left-zone"
  },
  {
    path: "",
    component: DataSummaryComponent,
    outlet: "right-zone"
  }
];

It actually works pretty well, but I'd like to be able to load more than a single component in the "right-zone" (and in the left one as well actually). The idea would be to have something like this:

{
  path: "",
  components: [ DataSummaryComponent, AskSummaryComponent ],
  outlet: "right-zone"
}

The controllers would just be appended one after one. Is it currently supported? If no, is it possible to extend the existing RouterOutlet to do so?

Thanks

Only one component can be assigned with a Route, What you may do is add a parent component consisting of DataSummaryComponent & AskSummaryComponent and configure it in the route.

Update:

As mentioned in comment you may create a generic component which loads components dynamically using data property configuration in route,

Route configuration

const appRoutes: Routes = [
  { path: '',   redirectTo: '/route1', pathMatch: 'full' },
  { path: 'route1',  component: MasterComponent, data: {puppets : [PuppetComponent1]} },
  { path: 'route2',  component: MasterComponent,  data: {puppets : [PuppetComponent2, PuppetComponent3]}},
  { path: 'route3',  component: MasterComponent,  data: {puppets : [PuppetComponent1, PuppetComponent2, PuppetComponent4]}}
];

Master Component

@Component({
  template: `<h1>I am the Master of components</h1>
  <hr />
  <div #puppetContainer></div>
  `
})
class MasterComponent { 
   @ViewChild('puppetContainer', { read: ViewContainerRef }) puppetContainer: ViewContainerRef;

    constructor(
        private router: Router,
        private route: ActivatedRoute,
        private _componentFactoryResolver: ComponentFactoryResolver,
        private viewContainer: ViewContainerRef) {

    }

    ngOnInit(){
       this.route.data
           .subscribe(data => {
              if(!!data && !!data.puppets && data.puppets.length > 0){
                data.puppets.map(puppet => {
                  let componentFactory = this._componentFactoryResolver.resolveComponentFactory(puppet);
                  this.puppetContainer.createComponent(componentFactory);
                });
              }
           });
    }

}

Check this Plunker!!

Hope this helps!!