Angular 8: Route double nested named router outlets

I'm working with Angular 8.3.6 and I have nested named outlets that I would like to route. My route setup looks like so:

{
path: 'main',
component: MainComponent,
data: {
  reuseRoute: true
},
children : [
  {
    path: 'lowerone',
    component: LoweroneComponent,
    outlet: 'mainoutlet', data: {
      reuseRoute: true
    },
    children : [
      {
      path: 'loweroneone',
        component: LoweroneoneComponent,
        outlet: 'loweroneoutlet', data: {
          reuseRoute: true
        }
      }
    ]
  }
]
}

Everything is fine, until I try to route to "loweroneone". I do this by calling this line of code here, mostly because I don't know any better.

    this.router.navigate(['/main', { outlets: { mainoutlet: 'lowerone', 
        loweroneoutlet: 'loweroneone' }}]);

This line of code creates the following error in console:

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'main'
Error: Cannot match any routes. URL Segment: 'main'
at ApplyRedirects.noMatchError (router.js:4294)
at CatchSubscriber.selector (router.js:4258)
at CatchSubscriber.error (catchError.js:29)
at MapSubscriber._error (Subscriber.js:75)

In the console, I see what I would expect

url: "/main/(mainoutlet:lowerone//loweroneoutlet:loweroneone)"

But no dice. Also, I should mention that the html in the 'lowerone' component contains the loweroneoutlet with:

<p>lowerone works!</p>
<router-outlet name="loweroneoutlet"></router-outlet>

You can see the code-sample on Github here. Any help is greatly appreciated.