title: Provide router services for core components Angular 2
body: <p>I have ng2 app  where I have  app/app.module ...    and core/core.module ....</p>
  
  <p>in core modules I have some modules that used at app top level and only once (like in official doc's) but one of that modules required Router module (some functionality is working with router).</p>
  
  <p>But router is provide in App.module (with all App routing).   And I got issue - No provider for ActivatedRouteSnapshot from core/header/header.component</p>
  
  <p>How I can resolve it? Should I place my header from core to app folder or should I provide router for core modules? Thanks.</p>
  
  <p>P.S. Update with Router Module. I still got an error - <strong>No provider for RouterStateSnapshot!</strong></p>
  
  <p>Other interesting things that standard router and activatedRoute is working. So when I remove <strong>RouterStateSnapshot</strong>  from constructor (and remove relative console.log of course) all code is working fine. So looks like routerModule is available and it's really strange.</p>
  
  <pre><code>import { NgModule, Component, OnInit} from '@angular/core';
  import { CommonModule } from '@angular/common';
  //import { ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
  import { Router, ActivatedRoute, Params, RouterStateSnapshot } from '@angular/router';
  /* ------- !Angular2 core  ---------*/
  
  import {HTTPPatientsListService} from '%cgm_sharedServices%/http_patients_list.service';
  /* ------- !Services  ---------*/
  
  import { Config } from 'appConfig';
  /* ------- !Config  ---------*/
  
  
  @Component({
    selector: 't_breadcrumbs',
    template: `
  
        &lt;h1&gt;Bread&lt;/h1&gt;
  
          &lt;!--&lt;div class="row wrapper border-bottom white-bg page-heading"&gt;--&gt;
          &lt;!--&lt;div class="col-lg-10"&gt;--&gt;
              &lt;!--&lt;h2&gt;{{staticData.title}}&lt;/h2&gt;--&gt;
              &lt;!--&lt;ol class="breadcrumb"&gt;--&gt;
                &lt;!--&lt;li&gt;--&gt;
                   &lt;!--&lt;a [routerLink]="['Dashboard']" tabindex="-1"&gt;{{staticData.homeName}}&lt;/a&gt;--&gt;
                &lt;!--&lt;/li&gt;--&gt;
                &lt;!--&lt;li *ngFor="let crumbData of crumbsCollection; let last = last" [ngClass]="{'active': last}"&gt;--&gt;
                    &lt;!--&lt;a *ngIf="!last" (click)="navigateTo(crumbData.urlPath)" tabindex="-1"&gt;{{crumbData.displayName}}&lt;/a&gt;--&gt;
                    &lt;!--&lt;span *ngIf="last"&gt;&lt;b&gt;{{crumbData.displayName}}&lt;/b&gt;&lt;/span&gt;--&gt;
                &lt;!--&lt;/li&gt;--&gt;
              &lt;!--&lt;/ol&gt;--&gt;
            &lt;!--&lt;/div&gt;--&gt;
            &lt;!--&lt;div class="col-lg-2"&gt;--&gt;
          &lt;!----&gt;
              &lt;!--&lt;/div&gt;--&gt;
          &lt;!--&lt;/div&gt;--&gt;
    `,
    styles: [`
      .breadcrumb {
        background-color: #ffffff;
        padding: 0;
        margin-bottom: 0;
      }
  
      .breadcrumb &gt; li a {
        color: inherit;
      }
  
      .breadcrumb &gt; .active {
        color: inherit;
      }
    `]
  })
  
  export class BreadcrumbsComponent implements OnInit {
  
  
  
  
    // contains home static name and dynamic current component name
    private staticData = {
      'title': '',
      'homeName': 'Home'
    };
  
    private tempTitle: string;
    private crumbsCollection = [];
  
    constructor(
      private router: Router,
      private activatedRoute: ActivatedRoute,
      private routerStateSnap: RouterStateSnapshot,
  
      private config: Config,
      private httpPat: HTTPPatientsListService) { }
  
  
    ngOnInit() {
      console.log(this.activatedRoute);
      console.log(this.routerStateSnap);
    }
  
  
  }
  
  
  import { RouterModule } from '@angular/router';
  @NgModule({
    imports: [ CommonModule, RouterModule ],
    declarations: [ BreadcrumbsComponent ],
    exports: [ BreadcrumbsComponent ]
  })
  
  export class BreadcrumbsModule {}
  </code></pre>