title: Direct Link to Child Route in Angular 4
body: <p>I am trying to implement a basic list with details in Angular 4.</p>
  
  <p>I have the following routes:</p>
  
  <pre><code>{
      path: 'list',
      component: ListComponent,
      children: [
        {
          path: 'detail',
          component: DetailComponent,
        }
  }
  </code></pre>
  
  <p>I have a <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> in the <code>ListComponent</code>. Everything works fine when you click a link in the <code>ListComponent</code> to the child route. However, when you enter the link directly into the browser, I get the following error: </p>
  
  <blockquote>
    <p>Cannot find primary outlet to load</p>
  </blockquote>
  
  <p>I thought that when you navigate to a child route, it automatically loads the parent component. Am I missing something? How do I implement it so that I can also navigate to the URL directly?</p>
  
  <hr>
  
  <p><strong>Update:</strong> Here's the ListComponent file:</p>
  
  <pre><code>&lt;div *ngIf="!loadingData"&gt;
      &lt;ul&gt;
          &lt;li *ngFor="let listItem of lists"&gt;
              &lt;a href="#"&gt;{{ listItem.name }}&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>