title: Error: Uncaught (in promise): Error: Cannot match any routes Angular 2
body: <p>##Error
  I have implemented nested routing in my app. when application loads its shows login screen after login its redirects to admin page where further child routes exist like user, product, api etc. now when I navigate to admin it by default loads user screen but further <code>&lt;routeLinks&gt;</code> not working and its shows this error.
  <code>Error: Uncaught (in promise): Error: Cannot match any routes: 'product'</code></p>
  <p><a href="https://i.stack.imgur.com/zE9JI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zE9JI.png" alt="enter image description here" /></a></p>
  <p>After Click Product it shows this
  <a href="https://i.stack.imgur.com/16zVd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/16zVd.png" alt="enter image description here" /></a></p>
  <p>##Code main.ts</p>
  <pre><code>import { bootstrap }    from '@angular/platform-browser-dynamic';
  import { APP_ROUTER_PROVIDERS } from '../app/app.routes';
  import { AppComponent } from '../app/app.component';
  
  bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);
  </code></pre>
  <p>##app.component</p>
  <pre><code>import { Component } from '@angular/core';
  import { ROUTER_DIRECTIVES } from '@angular/router';
  
  @Component({
    selector: 'demo-app',
    template: `
  
      &lt;div class=&quot;outer-outlet&quot;&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
    `,
    directives: [ROUTER_DIRECTIVES]
  })
  export class AppComponent { }
  </code></pre>
  <p>##app.routes</p>
  <pre><code>import { provideRouter, RouterConfig } from '@angular/router';
  
  import { AboutComponent, AboutHomeComponent, AboutItemComponent } from '../app/about.component';
  import { HomeComponent } from '../app/home.component';
  
  export const routes: RouterConfig = [
    { 
      path: '', 
      component: HomeComponent
     },
    {
      path: 'admin',
      component: AboutComponent,
      children: [
        { 
          path: '', 
          component: AboutHomeComponent
         },
        { 
          path: '/product', 
          component: AboutItemComponent 
        }
      ]
    }
  ];
  
  export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
  ];
  </code></pre>
  <p>##home.component</p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl:'../app/layouts/login.html'
  })
  export class HomeComponent { }
  </code></pre>
  <p>##about.component</p>
  <pre><code>import { Component } from '@angular/core';
  import { ActivatedRoute, ROUTER_DIRECTIVES } from '@angular/router';
  
  @Component({
    selector: 'about-home',
    template: `&lt;h3&gt;user&lt;/h3&gt;`
  })
  export class AboutHomeComponent { }
  
  @Component({
    selector: 'about-item',
    template: `&lt;h3&gt;product&lt;/h3&gt;`
  })
  export class AboutItemComponent { }
  
  @Component({
      selector: 'app-about',
      templateUrl: '../app/layouts/admin.html',
      directives: [ROUTER_DIRECTIVES]
  })
  export class AboutComponent { }
        
  </code></pre>