Provide router services for core components Angular 2

Question

I have ng2 app where I have app/app.module ... and core/core.module ....

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).

But router is provide in App.module (with all App routing). And I got issue - No provider for ActivatedRouteSnapshot from core/header/header.component

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.S. Update with Router Module. I still got an error - No provider for RouterStateSnapshot!

Other interesting things that standard router and activatedRoute is working. So when I remove RouterStateSnapshot 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.

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: `

      <h1>Bread</h1>

        <!--<div class="row wrapper border-bottom white-bg page-heading">-->
        <!--<div class="col-lg-10">-->
            <!--<h2>{{staticData.title}}</h2>-->
            <!--<ol class="breadcrumb">-->
              <!--<li>-->
                 <!--<a [routerLink]="['Dashboard']" tabindex="-1">{{staticData.homeName}}</a>-->
              <!--</li>-->
              <!--<li *ngFor="let crumbData of crumbsCollection; let last = last" [ngClass]="{'active': last}">-->
                  <!--<a *ngIf="!last" (click)="navigateTo(crumbData.urlPath)" tabindex="-1">{{crumbData.displayName}}</a>-->
                  <!--<span *ngIf="last"><b>{{crumbData.displayName}}</b></span>-->
              <!--</li>-->
            <!--</ol>-->
          <!--</div>-->
          <!--<div class="col-lg-2">-->
        <!---->
            <!--</div>-->
        <!--</div>-->
  `,
  styles: [`
    .breadcrumb {
      background-color: #ffffff;
      padding: 0;
      margin-bottom: 0;
    }

    .breadcrumb > li a {
      color: inherit;
    }

    .breadcrumb > .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 {}

Answer 1

The expected usage for RouterStateSnapshot interface is:

  constructor(router: Router) {
    const snapshot: RouterStateSnapshot = router.routerState.snapshot;
    //...
  }

It is used as an interface, not as a provider. It may be available in guards, but that's because it is provided as a parameter in guard methods, not as an injectable (see CanActivate for example).