Issue in Angular eventservice primeng Scheduler

Question

I am trying to use PRIMENG scheduler in following Angular version. When I am trying to create eventservice for scheduler (following code) and system throws following error

"TS2304: Cannot find name 'HttpClient'"

export class EventService {
  constructor(private httpClient: HttpClient) {}
  getEvents() {
      return this.httpClient
      .get('showcase/resources/data/scheduleevents.json')
      .toPromise()
      .then(res => <any[]>res.json().data)
      .then(data => {
        return data;
      });
  }
}

module.ts:

import {
  RadioButtonModule,
  KeyFilterModule,
  DialogModule,
  DropdownModule,
  InputTextModule,
  ScheduleModule,
  TabViewModule,
  MessagesModule,
} from 'primeng/primeng';

import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { Injectable } from '@angular/core';

Angular version: Angular CLI: 6.0.8 Node: 8.11.3

Angular: 6.0.9 - animations, common, compiler, compiler-cli, core, forms http, language-service, platform-browser platform-browser-dynamic, router

I found the above piece of code in primeng website and looks like, this code implemented for Angular 2+ and Http is depreciated in Angular 6 https://www.primefaces.org/primeng/#/schedule

Can some throw some light on the same? Any help is highly appreciated.

Sudhir Sudhir · Accepted Answer · 2018-08-06T13:36:31

I could resolve compile error, however there is some run-time error.

Following steps are followed to resolve compile error:

appmodule.ts

`import { HttpClientModule } from '@angular/common/http'; 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ScheduleModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

AppComponent.ts(Your page):

import { OnInit, Component, ViewEncapsulation, Injectable } from '@angular/core';
import { ScheduleModule } from 'primeng/schedule';
import { Http } from '@angular/http';


export class EventService {

  constructor(private http: Http) { }

  getEvents() {
    return this.http.get('showcase/resources/data/scheduleevents.json')
      .toPromise()
      .then(res => <any[]>res.json().data)
      .then(data => data);
  }
}

Now, I have ran in to some other problems related to PRIMENG API. Posted same in PRIME NG Forum

Issue in Angular eventservice primeng Scheduler

1 Answers