错误：未捕获（承诺中）：TypeError：this.feed.load 不是函数 TypeError：this.feed.load 不是函数

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' });
  }

}

说明：当我调用这个 getApplication api 方法时，在该方法内部，我调用 valueRSS 函数， 但它给 this.feed.load 不是一个函数，也给我过程没有定义 我正在使用 Angular 10 和 rss-to-json 版本 1.0.5。 基本上在那个 api 中我们有 rss url 的响应，所以我们将 rss url 转换为 json 数据并将其显示为 html

Answer 1

我不确定“rss-to-json”库是否与最新版本的 Angular 兼容。我目前使用的是 Angular 11.1，并且无法使用包含的库来构建它。我的猜测是，您还面临一些不兼容问题，即 lib 被不正确地引用/加载，即使（以某种方式）您已设法使其构建。

所以也许这不是您期望的答案，但我的建议是改用 rss-parser，它仍然可以在 Angular 中使用。

以下是它应该如何添加到项目中：

1. npm install rss-parser（可能你也想卸载 rss-to-json）

   npm install stream

   npm install timers

   我不确定为什么在安装 rss-parse lib 时最后两个没有自动添加为依赖项，但是在我们添加它们之前构建将无法工作。

2. 在package.json内添加以下块：

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

需要这些行来避免与缺少节点部分相关的错误（因为我们在浏览器上，我们只是说我们不需要/使用它们）。

1. 在您的代码中，去掉public feed = require('rss-to-json');，因为它不会像那样工作。下面通过示例代码提供了一个关于如何使用 rss-parser 的示例：

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);
  }
}

还有一个parser.parseString() 方法用于解析预加载的 rss 提要。查看我在上面粘贴的 lib 官方链接了解更多信息。

---

如您所见，即使使用这个库，事情似乎也有点笨拙，因为我们需要做一些额外的步骤，但好的一面是即使使用最新版本的 Angular（v11 .1)，与没有的 rss-to-json 相比。

Answer 2

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';
import Parser from '../../../../node_modules/rss-parser/dist/rss-parser.min.js';

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();
    //this.valueRSS();
  }
  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);
    });
  }


  async valueRss(){
    return new Promise(async (resolve, reject) => {
      console.log(this.structure_app.rss_url);
      const parser = new Parser();
      await parser.parseURL(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' });
  }

}
after changing

Answer 3

创建另一个对this 指针的引用并在异步调用和回调中使用

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

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

检查这是否解决了您的问题