title: Angular4 router, Lazy loaded module child routes, named router outlets
body: <p>I have a wierd question. I need to setup secondary router outlets on the root routing elements of my lazy loaded modules, which have URL bases setup in the app routing module. The explanation seems a bit hard, but I am going to try to explain this. </p>
  
  <p>My app routing has this</p>
  
  <pre><code>{
       path: 'shop',
       loadChildren: 'app/shop/shop.module#ShopModule',
       canActivate: [AuthGuardService]
  },
  </code></pre>
  
  <p>this means that all of the shop routes should begin with </p>
  
  <p>/shop</p>
  
  <p>Now In the shop module I need to have the main content appear in a secondary router-outlet called "ShopContent". For this I have setup 2 test routes, one of which works for me.</p>
  
  <p>The shop tool routing is as follows.</p>
  
  <pre><code>const routes: Routes = [
      {
          path: '',
          component: ShopComponent,
          children: [
              {
                  path: 'overview',
                  component: ShopMarketingComponent,
                  outlet: 'ShopContent'
              },
              {
                  path: 'products',
                  component: ShopMarketingComponent,
                  outlet: 'ShopContent'
              }
          ]
      },
      {
          path: 'test',
          component: ShopComponent,
          children: [
              {
                  path: 'overview',
                  component: ShopMarketingComponent,
                  outlet: 'ShopContent'
              },
              {
                  path: 'products',
                  component: ShopMarketingComponent,
                  outlet: 'ShopContent'
              }
          ]
      }
  ];
  </code></pre>
  
  <p>as you can see, the empty '' route and 'test' route both have identical children. I also have the router outlet setup.</p>
  
  <pre><code>&lt;router-outlet name="ShopContent"&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>What seems to be my officer problem?</p>
  
  <p>I need to have the "/shop/overview" route open the ShopMarketingComponent in my secondary outlet, yet this routerLink gives me an undefined route error</p>
  
  <pre><code>[routerLink]="['/shop', {outlets: {ShopContent: ['overview']}}]"
  </code></pre>
  
  <p>Yet this one works completely fine</p>
  
  <pre><code>[routerLink]="['/shop/test', {outlets: {ShopContent: ['overview']}}]"
  </code></pre>
  
  <p>My question would be, why do I have to put an extra URL segment ( '/test' ) into the mix, so that I can have secondary router outlets? What in gods name am I doing wrong here?</p>