title: Angular 2 Routes not working while navigating through browser URL
body: <p>I have some problems with routes for an Angular project, mainly with the third level of child routes. The routes are working prefectly while navigating on the app. (<code>routerLink</code>) and the problem arise when accessing the URL through the browser URL.</p>
  
  <p>My Angular version is 2.4.0 <br>
  I am testing on dev server with <code>ng serve</code>. </p>
  
  <p>For a project with the given structure,</p>
  
  <pre><code>.
  ├── photos
  ├── posts
  ├── users
  │   ├── detail
  │   │   ├── address
  │   │   ├── family
  │   │   ├── information
  │   │   └── phones
  │   ├── friends
  │   └── profile
  └── videos
  </code></pre>
  
  <p>The following is the code,</p>
  
  <pre><code>// user routes
  export const userRoutes : Routes = [
    {
      path: 'detail',
      component: DetailComponent
    },
    {
      path: 'friends',
      component: FriendsComponent
    },
    {
      path: 'profile',
      component: ProfileComponent
    }
  ]
  
  //app routes
  const appRoutes: Routes = [
    {
      path: '',
      component: HomeComponent
    },
    {
      path: 'photos',
      component: PhotosComponent
    },
    {
      path: 'posts',
      component: PostsComponent
    },
    {
      path: 'users',
      component: UserListComponent
    },
    {
      path: 'user/:username',
      component: UserComponent,
      children: userRoutes
    },
    {
      path: 'videos',
      component: VideosComponent
    }
  ]
  export const AppRoutes = RouterModule.forRoot(appRoutes);
  export const appRoutingProviders: any[] = [];
  </code></pre>
  
  <p>and is registered as,</p>
  
  <pre><code>@NgModule({
    declarations: [
      // declarations
    ],
    imports: [
      AppRoutes
    ],
    providers: [
      appRoutingProviders
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>So the Application works well with the RouterLink </p>
  
  <pre><code>[routerLink]="['/user', username, 'detail']
  </code></pre>
  
  <p>but when I navigate the browser <code>&lt;host&gt;/user/myuser/detail</code> it raise exception </p>
  
  <pre><code>Uncaught (in promise): Error: Cannot find primary outlet to load 'DetailComponent'
  </code></pre>
  
  <p>Whats wrong? Thanks.</p>
  
  <p>NB: I have setup <code>&lt;router-outlet&gt;</code> and is working perfectly on routerLink and the problem arises when the navigate through full url in browser.</p>