Hi guys, I'm trying to fetch data from API using this service and console log the data. I'm getting this error code of the component and the service provided below ERROR TypeError: Cannot read properties of undefined (reading 'getTweets')

   the service:

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { environment } from 'src/environments/environment';
    
    @Injectable({
      providedIn: 'root'
    })
    export class FetchDataService {
    
      constructor(private http: HttpClient) { }
    
      getTweets(){
        return this.http.get(environment.API_END_POINT   'tweets');
      }
    }
    -------------------------------------------------------------------
   

     the component:
        
import { Component, OnInit, ViewChild } from '@angular/core';
import {LiveAnnouncer} from '@angular/cdk/a11y';
import { DashboardService } from '../dashboard.service';
import {MatSort, Sort} from '@angular/material/sort';
import { MatTableDataSource, MatPaginator, MatButton } from '@angular/material';
import { Router } from '@angular/router';
import { ShareDataService } from '../share-data.service';
import { FetchDataService } from '../fetch-data.service';


@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {


  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

  constructor(private fetchData: FetchDataService, private 
 dashboardService: DashboardService ,private shareData: ShareDataService,private _liveAnnouncer: LiveAnnouncer,private router:Router) { }
  @ViewChild(MatSort,{static: true}) sort: MatSort;
  ngOnInit() {
    this.fetchTweets();
    this.dataSource.paginator = this.paginator;
  }

  fetchTweets(){
      this.fetchData.getTweets()
        .subscribe((success) => {
          console.log(success)
          },
          (err)=>{
            console.log(err);
          });
  }

  applyFilter(event){
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase()
  }

  onGetReport(name){
    this.fetchTweets();
    console.log(name);
    this.shareData.set(name);
    this.router.navigateByUrl('/reports');
  }
    ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

  /** Announce the change in sort state for assistive technology. */
  announceSortChange(sortState: Sort) {
    // This example uses English messages. If your application supports
    // multiple language, you would internationalize these strings.
    // Furthermore, you can customize the message to add additional
    // details about the values being sorted.
    if (sortState.direction) {
      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
    } else {
      this._liveAnnouncer.announce('Sorting cleared');
    }
  }
}

Hi guys, I'm trying to fetch data from API using this service and console log the data. I'm getting this error code of the component and the service provided bellow ERROR TypeError: Cannot read properties of undefined (reading 'getTweets')

DashboardComponent_Host.ngfactory.js:6 ERROR TypeError: Cannot read properties of undefined (reading 'getTweets')
    at DashboardComponent.fetchTweets (dashboard.component.ts:73:22)
    at DashboardComponent.ngOnInit (dashboard.component.ts:64:10)
    at checkAndUpdateDirectiveInline (core.js:24503:1)
    at checkAndUpdateNodeInline (core.js:35163:1)
    at checkAndUpdateNode (core.js:35102:1)
    at debugCheckAndUpdateNode (core.js:36124:36)
    at debugCheckDirectivesFn (core.js:36067:1)
    at Object.eval [as updateDirectives] (DashboardComponent_Host.ngfactory.js:11:5)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:36055:1)
    at checkAndUpdateView (core.js:35067:1)
View_DashboardComponent_Host_0 @ DashboardComponent_Host.ngfactory.js:6

CodePudding user response：

do this and see that you get...

this.http.get(environment.API_END_POINT   'tweets').pipe(
.map(res: any)=>{
   console.log(res);
}
).subscribe();

Also did you PROVIDE your tweets service in the app module?

CodePudding user response：

Solved! I provided the service to the parent component providers[] and imported the HttpClientModule to the appmodule imports.