title: Angular 6 Error "NullInjectorError: No provider for Router!"
body: <p>I'm currently working on a project where I need the user to fill out an angular form and then send it to a route in my backend to process the data. The backend is in ASP.NET and I already have a functional form in HTML that's working :</p>
  <pre><code>&lt;body&gt;
  &lt;h2 style=&quot;text-align:center&quot;&gt;Push notification test&lt;/h2&gt;
  &lt;form style=&quot;align-content:center&quot; action=&quot;SendPushNotification&quot; method=&quot;post&quot;&gt;
      &lt;div&gt;
          &lt;fieldset&gt;
              &lt;legend&gt; Informations &lt;/legend&gt;
              &lt;label&gt; Notification name : &lt;/label&gt;
              &lt;input name=&quot;notificationName&quot; id=&quot;notificationName&quot; type=&quot;text&quot; value=&quot;Bonjour&quot; /&gt;
          &lt;/fieldset&gt;
          &lt;br /&gt;
          &lt;fieldset&gt;
              &lt;label&gt; Server Key : &lt;/label&gt;
              &lt;input name=&quot;serverKey&quot; id=&quot;serverKey&quot; type=&quot;text&quot; value=&quot;AAAAuTv1XVQ:APA91bHsgOmK-quki_rRehRhON9c_y9INocubgru6_jPePiE_Zt5iVXfJ-XD43RubfIY5WEoIpFEyziByfeNRsoIlpeNi693bGZYfjjb7ULDx23sRzHQcYLCgl7y3vn-K9X8hrmQhw1oY6lSTml2aqzoi8GGBIeZYA&quot; /&gt;
          &lt;/fieldset&gt;
          &lt;br /&gt;
          &lt;fieldset&gt;
              &lt;label&gt; To mobile user : &lt;/label&gt;
              &lt;select name=&quot;selectMobile&quot; id=&quot;selectMobile&quot; style=&quot;width:400px&quot; name=&quot;mobileUser&quot;&gt;
                  &lt;option&gt;Select Mobile User&lt;/option&gt;
              &lt;/select&gt;
          &lt;/fieldset&gt;
          &lt;br /&gt;
          &lt;fieldset&gt;
              &lt;label&gt; To topic : &lt;/label&gt;
              &lt;input name=&quot;topicName&quot; id=&quot;topicName&quot; type=&quot;text&quot; value=&quot;news&quot; /&gt;
          &lt;/fieldset&gt;
          &lt;br /&gt;
          &lt;fieldset&gt;
              &lt;label&gt; Message : &lt;/label&gt;
              &lt;textarea name=&quot;notificationMessage&quot; id=&quot;notificationMessage&quot; cols=&quot;40&quot; rows=&quot;5&quot;&gt;Comment tu vas toi ?&lt;/textarea&gt;
          &lt;/fieldset&gt;
          &lt;br /&gt;
          &lt;input type=&quot;submit&quot; value=&quot;Send Notification&quot; /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>HTML Rendering</strong></p>
  <p><a href="https://i.stack.imgur.com/hlTbC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hlTbC.png" alt="enter image description here" /></a></p>
  <p>So I'm trying to do the same thing in Angular 6 with this result but when I want to assign the route &quot;SendNotification&quot; to my &quot;Submit&quot; button I get the following error :</p>
  <p><strong>Angular Rendering + Error</strong></p>
  <p><a href="https://i.stack.imgur.com/Sb3C5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Sb3C5.png" alt="enter image description here" /></a></p>
  <p><strong>notification-form.component.html</strong></p>
  <pre><code>&lt;button [routerLink]=&quot;['SendNotification']&quot; type=&quot;submit&quot; class=&quot;btn btn-success&quot; [disabled]=&quot;!notificationForm.form.valid&quot;&gt;Submit&lt;/button&gt;
  </code></pre>
  <p>The error occurs as soon as I add <code>[routerLink]</code> or add a private constructor :</p>
  <pre><code> constructor(private router: Router) {}
  </code></pre>
  <p>to my <code>notification-form.component.ts</code>.
  I have already tried several solutions like adding <code>HttpClientModule</code> to my <code>app.module.ts</code> but nothing works.</p>
  <p>Is there something I'm doing wrong?</p>
  <p>Thank you in advance for your time!</p>
  <p>UPDATE:</p>
  <p><strong>app.module.ts</strong></p>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms'; // &lt;-- NgModel lives here
  import { RouterModule } from '@angular/router';
  import { HttpClientModule } from '@angular/common/http';
  
  import { AppComponent } from './app.component';
  import { NotificationFormComponent } from './notification-form/notification-form.component';
  
  @NgModule({
    imports: [
      BrowserModule,
      HttpClientModule,
      FormsModule,
      RouterModule
    ],  
    declarations: [
      AppComponent,
      NotificationFormComponent
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  
  export class AppModule { }
  </code></pre>