title: Angular 2 throwing error: Outlet is not activated
body: <p>I have set up my app so that I have a <code>Recipe Book</code> which has a list of <code>Recipies</code> which when I click on a Recipe it then shows the <code>Recipe Details</code> in a nested route. This then also has a button that when clicked loads the ingredients in a nested route inside the <code>Recipes Details</code>. </p>
  
  <p>So far the routing seems to work, except when I try to navigate to another <code>Recipe</code>. If the <code>Ingredients</code> tray(route) is active then it will change Recipe and collapse the <code>Ingredients</code> Route, If I then try and navigate (without opening the Ingredients) I get the following error:</p>
  
  <pre><code>Uncaught (in promise): Error: Outlet is not activated
  Error: Outlet is not activated
  </code></pre>
  
  <p>It looks like I the router needs <code>Ingredients</code> to be active or else it doesn't understand the nested route. Thats my take on it but not sure how to fix it or when I went wrong.</p>
  
  <p><strong>single-recipe-book-page.component.html</strong></p>
  
  <pre><code>&lt;app-tray class="recipe-list"&gt;
      &lt;app-recipe-list [recipe]="recipe"&gt;&lt;/app-recipe-list&gt;
  &lt;/app-tray&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>recipe-detail.component.html</strong></p>
  
  <pre><code>&lt;app-tray class="recipe"&gt;
      The routing has worked and loaded recipe.
  &lt;/app-tray&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>ingredients-list.component.html</strong></p>
  
  <pre><code>&lt;app-tray class="ingredients-list"&gt;
      Recipe Ingredients have loaded.
  &lt;/app-tray&gt;
  </code></pre>
  
  <p><strong>app.routes.ts</strong> (updated)</p>
  
  <pre><code>export const routerConfig : Route[] = [
    {
      path: 'recipe-books',
      children: [
        {
          path: ':id', component: SingleRecipeBookPageComponent,
          children: [
            {
              path: 'recipes',
              children: [
                { path: ':id', component: RecipeDetailComponent,
                  children: [
                    { path: '', component: IngredientsListComponent },
                    { path: 'ingredients', component: IngredientsListComponent }
                  ]
                },
                { path: 'new', component: IngredientsListComponent },
                { path: '', component: RecipeDetailComponent }
              ]
            },
            { path: '', redirectTo: 'recipes', pathMatch: 'full' }
          ]
        },
        { path: '', component: RecipeBooksPageComponent }
      ]
    },
    { path: 'ingredients', component: IngredientsComponent },
    { path: '', redirectTo: 'recipe-books', pathMatch: 'full' },
    { path: '**', redirectTo: 'recipe-books', pathMatch: 'full' }
  ];
  </code></pre>