title: Angular 5 Uncaught (in promise): Error: StaticInjectorError(AppModule)
body: <p>I am doing this development in Angular 5
  Visual Studio 2017 version 15.6.7 
  TargetFramework - netcoreapp2.0
  rxjs: 5.5.10</p>
  
  <p>I cant get rid of this error:</p>
  
  <blockquote>
    <p>ERROR Error: Uncaught (in promise): Error:
    StaticInjectorError(AppModule)[VtoReportComponent -> Vtos]:
    StaticInjectorError(Platform: core)[VtoReportComponent -> Vtos]:
    NullInjectorError: No provider for Vtos!</p>
  </blockquote>
  
  <p>here is vto.service.ts </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Http, HttpModule } from '@angular/http';
  import { Observable } from 'rxjs';
  import { GroupDescriptor, DataSourceRequestState, DataResult, process, State } from '@progress/kendo-data-query';
  import { ExcelExportData } from '@progress/kendo-angular-excel-export';
  import { aggregateBy, SortDescriptor, orderBy } from '@progress/kendo-data-query';
  import { Vtos } from '../../services/vto.service';
  
  import {
    GridComponent,
    GridDataResult,
    DataStateChangeEvent
  } from '@progress/kendo-angular-grid';
  
  @Component({
    selector: 'app-vto-report',
    templateUrl: './vto-report.component.html',
    styleUrls: ['./vto-report.component.css']
  })
  export class VtoReportComponent {
    public multiple = false;
    public allowUnsort = true;
    public gridData: GridDataResult;
    public state: DataSourceRequestState = {
      skip: 0,
      take: 5,
    };
  
    constructor(private vtos: Vtos) {
        this.vtos.getVtos(this.state).subscribe(r =&gt; this.gridData = r);
    }
  
    public dataStateChange(state: DataStateChangeEvent): void {
      this.state = state;
      this.vtos.getVtos(state)
        .subscribe(r =&gt; this.gridData = r);
    }
  </code></pre>
  
  <p>vto.service.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;kendo-grid [data]="gridData"
              [pageSize]="state.take"
              [skip]="state.skip"
              [sort]="state.sort"
              [sortable]="true"
              [pageable]="true"
              [scrollable]="'scrollable'"
              [groupable]="true"
              [group]="state.group"
              [filterable]="true"
              [filter]="state.filter"
              (dataStateChange)="dataStateChange($event)"
              [height]="370"&gt;
    &lt;kendo-grid-column field="EmployeeID" title="Employee ID" [width]="250"&gt;&lt;/kendo-grid-column&gt;
    &lt;kendo-grid-column field="ReportDate" title="Report Date" width="240" filter="date" format="{0:MM/dd/yyyy}"&gt;&lt;/kendo-grid-column&gt;
    &lt;kendo-grid-column field="BeginTime" title="Begin Time"&gt;&lt;/kendo-grid-column&gt;
    &lt;kendo-grid-column field="EndTime" title="End Time"&gt;&lt;/kendo-grid-column&gt;
    &lt;kendo-grid-column field="TotalHours" title="Total Hours" filter="numeric"&gt;&lt;/kendo-grid-column&gt;
  
    &lt;kendo-grid-column field="VTOby" title="VTOby"&gt;
  
    &lt;/kendo-grid-column&gt;
    &lt;kendo-grid-column field="Timestamp" title="Time stamp"&gt;&lt;/kendo-grid-column&gt;
  &lt;/kendo-grid&gt;
  </code></pre>
  
  <p>Vto-service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { VTO } from './vto';
  import { Http, HttpModule } from '@angular/http';
  import { Observable } from 'rxjs';
  import { HttpClientModule, HttpClient } from '@angular/common/http';
  import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
  import {
    toDataSourceRequestString,
    translateDataSourceResultGroups,
    translateAggregateResults,
    DataResult,
    DataSourceRequestState
  } from '@progress/kendo-data-query';
  import 'rxjs/add/operator/map';
  import { GridDataResult, DataStateChangeEvent } from '@progress/kendo-angular-grid';
  
  @Injectable()
  export class Vtos{
    private vtoUrl = location.href.replace(location.hash, '') + '/home/getVtos';
  
    constructor(private http: Http) { }
  
    public getVtos(state: DataSourceRequestState): Observable &lt;DataResult&gt; {
      const queryStr = `${toDataSourceRequestString(state)}`; //serialize the state
      const hasGroups = state.group &amp;&amp; state.group.length;
  
      return this.http
        .get(`${this.vtoUrl}?${queryStr}`) //send the state to the server
        .map(response =&gt; response.json())
        .map(({ data, total/*, aggregateResults*/ }) =&gt; // process the response
          (&lt;GridDataResult&gt;{
            //if there are groups convert them to compatible format
            data: hasGroups ? translateDataSourceResultGroups(data) : data,
            total: total,
            // convert the aggregates if such exists
            //aggregateResult: translateAggregateResults(aggregateResults)
          })
        )
    }
  }
  </code></pre>
  
  <p>HomeController.cs</p>
  
  <pre class="lang-cs prettyprint-override"><code>public JsonResult GetVtos()
  {
    var data = Vto.GetVtos();
    return Json(data);
  }
  </code></pre>
  
  <p>Vto.cs</p>
  
  <pre class="lang-cs prettyprint-override"><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  using VTO.DTO;
  using System.Data;
  using System.Data.SqlClient;
  using System.Web;
  
  namespace VTO.DAL
  {
    public class Vto
    {
      public static List&lt;DTO.VtoDto&gt; GetVtos()
      {
        List&lt;DTO.VtoDto&gt; Vtos = new List&lt;DTO.VtoDto&gt;(3);
        Vtos.Add(new DTO.VtoDto(1010765345, "2018-03-24", "9:30:00 AM", "2:30:00 PM", 5, "Browning, Mary", "1:39:00 PM"));
        Vtos.Add(new DTO.VtoDto(1010756567, "2018-03-22", "9:30:00 AM", "12:30:00 PM", 3, "Cruz, Denise", "1:39:00 PM"));
        Vtos.Add(new DTO.VtoDto(1034534568, "2018-03-17", "8:30:00 AM", "2:30:00 PM", 6, "Perez, Breana", "1:39:00 PM"));
  
        return Vtos.ToList();
      }
    }
  }
  </code></pre>
  
  <p>and lastly AppModule</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { RouterModule } from '@angular/router';
  
  import { AppComponent } from './components/app/app.component';
  import { NavMenuComponent } from './components/navmenu/navmenu.component';
  import { HomeComponent } from './components/home/home.component';
  import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
  import { CounterComponent } from './components/counter/counter.component';
  import { RequestProcessingComponent } from './components/request-processing/request-processing.component';
  import { ContingentMaintenanceComponent } from './components/contingent-maintenance/contingent-maintenance.component';
  import { TimezoneComponent } from './components/timezone/timezone.component';
  import { HierarchyConfigurationComponent } from './components/hierarchy-configuration/hierarchy-configuration.component';
  import { VtoReportComponent } from './components/vto-report/vto-report.component';
  import { ContingentsReportComponent } from './components/contingents-report/contingents-report.component';
  import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
  import { JobStatusComponent } from './components/job-status/job-status.component';
  import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
  import { HttpClientModule, HttpClient } from '@angular/common/http';
  
  @NgModule({
    declarations: [
      AppComponent,
      NavMenuComponent,
      CounterComponent,
      FetchDataComponent,
      HomeComponent,
      RequestProcessingComponent,
      ContingentMaintenanceComponent,
      TimezoneComponent,
      HierarchyConfigurationComponent,
      VtoReportComponent,
      ContingentsReportComponent,
      JobStatusComponent
    ],
    imports: [
      CommonModule,
      HttpModule,
      HttpClientModule,
      FormsModule,
      DateInputsModule, BrowserAnimationsModule, DropDownsModule, GridModule, ExcelModule,
      RouterModule.forRoot([
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: RequestProcessingComponent },
        { path: 'counter', component: CounterComponent },
        { path: 'fetch-data', component: FetchDataComponent },
        { path: 'ContiMain', component: ContingentMaintenanceComponent },
        { path: 'HierConfig', component: HierarchyConfigurationComponent },
        { path: 'vtoreport', component: VtoReportComponent },
        { path: 'ContiReport', component: ContingentsReportComponent },
  
        { path: '**', redirectTo: 'home' }
      ])
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  </code></pre>