title: Angular 2 - Child routes load parent component
body: <p>I am trying to get my routing to work in my Angular 2 application.</p>
  
  <p>Here is the code I am using in the <code>app.routes.ts</code> file</p>
  
  <pre><code>export const ROUTES: Routes = [
    { path: '',      component: PublicComponent, data: { title: 'Heroes List' } },
    { path: 'home',  component: PublicComponent },
    { path: 'admin',  component: PrivateComponent, children: [
      { path: '', component: PrivateComponent },
      { path: 'account-settings', component: AccountSettingsComponent, children: [
        { path: '', component: UserInformationComponent},
        { path: 'user-information', component: UserInformationComponent},
        { path: 'companys-information', component: CompanysInformationComponent}
      ] },
    ] },
    { path: '**',    component: NoContentComponent },
  ];
  </code></pre>
  
  <p>Every time I try to navigate to one of the child routes it loads up the parent route.</p>
  
  <p>So lets say for example I go to:-</p>
  
  <p><code>http://localhost:4200/#/admin</code></p>
  
  <p>It pulls in the correct component PrivateComponent.</p>
  
  <p>But when I navigate to:-</p>
  
  <pre><code>http://localhost:4200/#/admin/account-settings
  </code></pre>
  
  <p>Or any children of the account settings it loads up the <code>PrivateComponent</code> and not the <code>AccountSettingsComponent</code> or <code>UserInformationComponent</code> as stated in the code you can see above.</p>
  
  <p>Am I missing something in my code to get this to work?</p>
  
  <p>The application was generated using Angular CLI.</p>
  
  <p>Thank you in advance.</p>