I am working on an ng2 app where I have the app/app.module and core/core.module. In the core modules, there are some modules that are used at the app top level and only once as mentioned in the official documentation. However, one of these modules requires the Router module for functionality related to routing.
The issue arises because the router is provided in App.module along with all the App routing configurations. The error message I encountered was "No provider for ActivatedRouteSnapshot from core/header/header.component."
How can I resolve this issue? Should I move the header from the core folder to the app folder or should I provide the router for core modules separately? Any guidance would be appreciated. Thank you.
P.S. After updating with the Router Module, I still encounter an error - No provider for RouterStateSnapshot!
Interestingly, the standard router and activatedRoute functionalities are working fine. When I remove RouterStateSnapshot from the constructor (and remove relevant console.log statements), everything works properly. It seems like the RouterModule is available, which is quite perplexing.
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 {}