title: error when trying to inject router into app.component.ts
body: <p>I am having trouble injecting router into the constructor of the app.component.ts file, by calling "private router: Router".</p>
  
  <p>It gives me the following error:
  Error: "StaticInjectorError(AppModule)[AppComponent -> Router]: 
    StaticInjectorError(Platform: core)[AppComponent -> Router]: 
      NullInjectorError: No provider for Router!"</p>
  
  <p>But when I remove the injection, the page works fine, but I cannot use the navigate function to load into other components.</p>
  
  <p>Here is what I have</p>
  
  <p>app.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>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']);
    }
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;button (click)="goToLobby()"&gt;Go to lobby&lt;/button&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>app-routing.module.ts</p>
  
  <pre><code>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 {}
  </code></pre>