title: Cannot read property 'navigate' of undefined in Angular
body: <p>All help articles on this error for Angular say to make sure one has injected 'Router' like this:</p>
  <p>constructor(router: Router....</p>
  <p>Which I have done.</p>
  <p>I'm unsure what else to do.  I have to fix this before I start troubleshooting the routes.</p>
  <p>My Goals:
  Allow the user to navigate to a child route.
  Allow the user to close the current route on click.</p>
  <p>So the current address would be:
  https://localhost:4200/layout/usermanagement/(newuser:newuser/(newuserinput:newuserinput))</p>
  <p>After clicking I would be routed to:
  https://localhost:4200/layout/usermanagement/(newuser:newuser/(newuserorginfo:newuserorginfo))</p>
  <p>Also, after clicking another button I would be routed to:
  https://localhost:4200/layout/usermanagement/(newuser:newuser))</p>
  <p>Here is my Component, Module, and Template.</p>
  <p>COMPONENT new-user-input.component.ts</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { slideToRight } from '../../../../router.animations';
  import { Router, ActivatedRoute, UrlSegment } from '@angular/router';
  
  @Component({
    selector: 'app-new-user-input',
    templateUrl: './new-user-input.component.html',
    styleUrls: ['./new-user-input.component.css'],
    animations: [slideToRight()]
  })
  export class NewUserInputComponent implements OnInit {
    router: Router;
  
    constructor(router: Router, r: ActivatedRoute) {
      r.url.subscribe((s: UrlSegment[]) =&gt; {
        console.log(&quot;url&quot;, s); //https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab
      });
    }
  
    ngOnInit() {
    }
  
    displaySibling() {
      console.log(this.router);
      this.router.navigate(['../', { outlets: { newuserorginfo: ['newuserorginfo'] } }])
    }
  
    closeBlade() {
      this.router.navigate([{ outlets: { newuserinput: null } }]);
    }
  
  }
  </code></pre>
  <p>MODULE  user-management.module.ts</p>
  <pre><code>import { HttpModule, JsonpModule } from '@angular/http';
  import { BrowserModule } from '@angular/platform-browser';
  // import 'rxjs/add/operator/map';
  import { NgModule, Type, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { GridAllModule } from '@syncfusion/ej2-ng-grids';
  import { HttpClientModule } from '@angular/common/http';
  import {
    GridModule, ToolbarService, EditService, SortService, GroupService, FilterService, PageService,
    ContextMenuItem, PdfExportService, ExcelExportService, ContextMenuService, ResizeService,
    DataSourceChangedEventArgs, DataStateChangeEventArgs
  } from '@syncfusion/ej2-ng-grids';
  
  
  import { UserManagementComponent } from './user-management.component';
  import { PageHeaderModule } from './../../shared/page-header/page-header.module';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  
  // import { NewUserComponent } from './new-user/new-user.component';
  // import { PendingUserComponent } from './pending-user/pending-user.component';
  // import { ProcessUserComponent } from './process-user/process-user.component';
  // import { NewUserInputComponent } from './new-user/new-user-input/new-user-input.component';
  
  import { RouterModule } from '@angular/router';
  import { NewUserOrgInfoComponent } from './new-user/new-user-org-info/new-user-org-info.component';
  import { NewUserSupervisorInfoComponent } from './new-user/new-user-supervisor-info/new-user-supervisor-info.component';
  import { NewUserSecurityInfoComponent } from './new-user/new-user-security-info/new-user-security-info.component'; //??????????
  
  @NgModule({
    imports: [
      CommonModule,
      PageHeaderModule,
      GridModule,
      RouterModule,
      NgbModule
    ],
    declarations: [UserManagementComponent, NewUserOrgInfoComponent, NewUserSupervisorInfoComponent, NewUserSecurityInfoComponent],
    providers: [EditService, ToolbarService, SortService, GroupService, FilterService, PageService,
      ContextMenuService, PageService, ResizeService, PdfExportService, ExcelExportService]
  })
  export class UserManagementModule {
  }
  </code></pre>
  <p>TEMPLATE new-user-input.component.html</p>
  <pre><code>&lt;div class=&quot;blade&quot; [@routerTransition]&gt;
    &lt;div class=&quot;blade-header&quot;&gt;
      &lt;h3&gt;User Information&lt;/h3&gt;
      &lt;div class=&quot;window-functions&quot;&gt;
        &lt;i class=&quot;fa fa-window-minimize&quot;&gt;&lt;/i&gt;
        &lt;i class=&quot;fa fa-window-restore&quot;&gt;&lt;/i&gt;
        &lt;i class=&quot;fa fa-window-maximize&quot;&gt;&lt;/i&gt;
        &lt;!-- &lt;a routerLink='/layout/usermanagement/(newuser:newuser)' routerLinkActive='router-link-active'&gt; --&gt;
        &lt;i (click)='closeBlade()' class=&quot;fa fa-window-close&quot;&gt;&lt;/i&gt;
        &lt;!-- &lt;/a&gt; --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;form action=&quot;submit&quot;&gt;
      &lt;!-- &lt;label for=&quot;firstname&quot;&gt;First Name:&lt;/label&gt; --&gt;
      First name:
      &lt;br&gt;
      &lt;input type=&quot;text&quot; name=&quot;firstname&quot; value=&quot;Richard&quot;&gt;
      &lt;br&gt; Last name:
      &lt;br&gt;
      &lt;input type=&quot;text&quot; name=&quot;lastname&quot; value=&quot;Dawkins&quot;&gt;
      &lt;br&gt; Cell phone:
      &lt;br&gt;
      &lt;input type=&quot;tel&quot; name=&quot;cellphone&quot; value=&quot;(585) 271-8888&quot;&gt;
      &lt;br&gt; Office phone:
      &lt;br&gt;
      &lt;input type=&quot;tel&quot; name=&quot;officephone&quot; value=&quot;(585) 271-8887&quot;&gt;
      &lt;br&gt; Fax:
      &lt;br&gt;
      &lt;input type=&quot;tel&quot; name=&quot;fax&quot; value=&quot;(585) 271-8886&quot;&gt;
      &lt;br&gt; City:
      &lt;br&gt;
      &lt;input type=&quot;text&quot; name=&quot;city&quot; value=&quot;City&quot;&gt;
      &lt;br&gt; State:
      &lt;br&gt;
      &lt;input type=&quot;text&quot; name=&quot;state&quot; value=&quot;New York&quot;&gt;
      &lt;br&gt; Requester title:
      &lt;br&gt;
      &lt;br&gt;
      &lt;!-- &lt;input type=&quot;submit&quot; value=&quot;Next&quot; disabled=&quot;true&quot;&gt; --&gt;
      &lt;input class=&quot;next-button&quot; type=&quot;submit&quot; value=&quot;Next&quot; (click)=&quot;displaySibling()&quot;&gt;
      &lt;!-- &lt;input type=&quot;submit&quot; value=&quot;Next&quot; [routerLink]=&quot;[{ outlets: { newuserorginfo: ['newuserorginfo '] } } ]&quot; routerLinkActive='active '&gt; --&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;router-outlet name=&quot;newuserorginfo&quot;&gt;&lt;/router-outlet&gt;
  </code></pre>