I have created a component that utilizes an HTML attribute. I set it up so that users can specify the route when using this component within another component. However, every time I attempt to define the route value, I encounter a 'No provider for Router' error.
When viewing the browser, I see the following output:
ERROR Error: StaticInjectorError(AppModule)[RouterLinkActive -> Router]: StaticInjectorError(Platform: core)[RouterLinkActive -> Router]: NullInjectorError: No provider for Router!
Below is the code snippet for the component :
@Component({
selector: 'li[o-nav-link]',
template: `
<a #link [routerLink]="route" class="nav-link" routerLinkActive="active"
[attr.title]="title === 'undefined' ? null : title"
[attr.aria-current]="isActive"><ng-content></ng-content></a>
`
})
export class ONavLink implements DoCheck {
@HostBinding('class.nav-item')
@Input()
public route: string;
@Input()
public title: string;
@ViewChild('link')
public link: ElementRef;
public isActive = false;
public ngDoCheck() {
this.isActive = this.link.nativeElement.classList.contains('active');
}
}
Here's how I am using the component:
<li o-nav-link route="test">Getting tested</li>
If you have any insights on what might be causing this issue, your help would be greatly appreciated. I've been trying to troubleshoot this tirelessly!
Also, here is my module setup:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { NgBoostedModule } from 'ng-boosted';
const approutes: Routes = [
{ path: 'test', component: AppComponent},
{ path: 'start', component: AppComponent}
];
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule.forRoot(),
NgBoostedModule,
FormsModule,
RouterModule.forRoot(approutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
PS: The 'test' route is defined in the route array :)