angular - Error: Uncaught (in promise): TypeError: this.feed.load is not a function TypeError: this.feed.load is not a function

Question

import { Component, OnInit, Inject } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/common';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { NgbModalConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { AppsService } from '../services/apps.service';
import { IApps, Apps, IDataUser, DataUser, IClient, Client, IAppData, AppData } from '../models/apps.model';
import { NgxSpinnerService } from 'ngx-spinner';
declare var require: any;
@Component({
  selector: 'rss-channel-content',
  templateUrl: './rss-channel.component.html',
  styleUrls: ['./rss-channel.component.scss'],
  providers: [
    AppsService,
    NgbModalConfig,
    NgbModal
  ]
})
export class RssChannelComponent implements OnInit {

  public isGallery: boolean = false;
  public is_view: boolean = false;
  public is_save: boolean = false;
  private id_app: string;
  public structure_app: IApps = new Apps();
  public form_data_user: FormGroup;
  public href: string = '';
  public url: string = '';
  public ocultar: boolean = false;
  public feed = require('rss-to-json');
  public rss: any;
  
  constructor(
    private appsService: AppsService,
    private route: ActivatedRoute,
    private modalService: NgbModal,
    private router: Router,
    private spinner: NgxSpinnerService,
    private titleService: Title,
    @Inject(DOCUMENT) private _document: HTMLDocument
  ) { }

  ngOnInit() {
    this.spinner.show();
    this.id_app = this.route.snapshot.params['id'];
    this.getApplication();
    this.getUrl();
  }
  private getUrl() {
    this.href = this.router.url;
    console.log(this.router.url);
    this.url = this.appsService.getUrl(this.href);
    console.log('url', this.url);

  }

  private getApplication() {
    this.appsService.getApp(this.id_app).subscribe(async (response) => {
      console.log('response', response);
      this.structure_app = response.response.options;
      this.titleService.setTitle(this.structure_app.name_app);
      this._document.getElementById('appFavicon').setAttribute('href', this.structure_app.icono_app);
      this.rss = await this.valueRss();
      this.is_view = true;
    }, (error) => {
      console.log(error);
    });
  }

  
  valueRss() {
    return new Promise((resolve, reject) => {
        console.log(this.structure_app.rss_url);
        this.feed.load(this.structure_app.rss_url, function (err, rss) {
        console.log(rss);
        resolve(rss);
      });
      this.spinner.hide();
    });
  }


  /**
   * changeColor
   */
  public changeColor(col: string, amt: any) {
    amt = amt === undefined ? -30 : amt;
    col = col === undefined ? '#eee' : col;
    return this.appsService.changeColor(col, amt);
  }

  public open(e: any) {
    this.modalService.open(e, { centered: true, size: 'lg' });
  }

}

explanation:when i call this getApplication api method,inside that method,i am calling valueRSS function, but its giving this.feed.load is not a function and also giving me process is not defined i am using angular 10 and rss-to-json version 1.0.5. basically in that api we have response of rss url,so we are converting that rss url to json data and displaying it to html

question from:https://stackoverflow.com/questions/65931812/error-uncaught-in-promise-typeerror-this-feed-load-is-not-a-function-typeer

Answer 1

I'm not sure if the 'rss-to-json' library is compatible with the recent versions of Angular. I'm currently on Angular 11.1 and not really able to make it build with that lib included. My guess is that you're also facing some incompatibility issue, where the lib is improperly referenced/loaded, even if (somehow) you've managed to make it build.

So maybe this is not the answer you expect, but my suggestion is to go with rss-parser instead, which is still usable from Angular.

Here's how it should be added to the project:

1. npm install rss-parser (probably you want also to uninstall rss-to-json)

   npm install stream

   npm install timers

   I'm not sure why the last two are not automatically added as dependencies when installing rss-parse lib, but the build won't work until we add them.

2. Add the following block inside package.json:

"browser": {
   "http": false,
   "https": false
}

This lines are needed for avoiding errors related to missing node parts (since we're on browser, we simply say that we don't need/use them).

3. In your code, get rid of the public feed = require('rss-to-json'); since it won't work like that anymoe. Below you have an example on how rss-parser can be used, via a sample code:

import { Component, OnInit } from '@angular/core';

// Since we need the browser pre-bundled file, we need to
// manually reference it with the absolute path
import Parser from '../../node_modules/rss-parser/dist/rss-parser.min.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  async ngOnInit() {
    const parser = new Parser();
    const feed = await parser.parseURL('https://cors-anywhere.herokuapp.com/https://www.reddit.com/.rss');

    console.log('received feed', feed);
  }
}

There is also a parser.parseString() method for parsing a pre-loaded rss feed. Check out the lib's official link I pasted above for more info.

---

As you can see, even with this library it seems that things are a bit clumsy, since we need to do some extra steps, but the up side is that it's compiling and working properly even with the latest version of Angular (v11.1), compared to rss-to-json which doesn't.