error when trying to inject router into app.component.ts

Question

I am having trouble injecting router into the constructor of the app.component.ts file, by calling "private router: Router".

It gives me the following error: Error: "StaticInjectorError(AppModule)[AppComponent -> Router]: StaticInjectorError(Platform: core)[AppComponent -> Router]: NullInjectorError: No provider for Router!"

But when I remove the injection, the page works fine, but I cannot use the navigate function to load into other components.

Here is what I have

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/Router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [MessageParser]
})


export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {}

  goToLobby() {
    this.router.navigate(['lobby']);
  }
}

app.component.html

<button (click)="goToLobby()">Go to lobby</button>

<router-outlet></router-outlet>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { MainComponent } from './main/main.component';
import { LobbyComponent } from './lobby/lobby.component';
import { GameComponent } from './game/game.component';

const appRoutes: Routes = [
  { path: '', component: MainComponent },
  { path: 'lobby', component: LobbyComponent },
  { path: 'game', component: GameComponent }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule {}

Sajeetharan Sajeetharan · Accepted Answer · 2018-07-31T04:11:48

Remove RouterModule from your exports inside AppRoutingModule

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [       
    ]
})

error when trying to inject router into app.component.ts

1 Answers