RSS reader Ionic

Ionic Framework ionic-v3
1

Hello!

I am trying to make a RSS reader, and have been following this tutorial: https://www.techiediaries.com/rss-atom-reader-ionic-3/

I am getting the error: _co.parseUrl is not a function
when I try to read a rss feed.

My code is:
contact.ts(contact is where i would like to display the feed)

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';



@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'


})


export class ContactPage {

  constructor(public navCtrl: NavController) {

  }
parseUrlWrapper(){
declare var RSSParser;
    return new Promise((resolve,reject)=>{
    RSSParser.parseURL(this.targetUrl, function(err, parsed) {
        console.log(parsed.feed.title);
        console.log(parsed.feed.entries);
        if(err){
        reject(err);
        }
        resolve(parsed.feed.entries);
    });
    });

}

}

contact.html:

<ion-header>

    <ion-navbar>
        <ion-title>Ionic 3 RSS/ATOM Reader</ion-title>
    </ion-navbar>

</ion-header>


<ion-content padding>
    <ion-input [(ngModel)]="targetUrl" placeholder="Please enter an RSS/Atom Feed URL"></ion-input>
    <button ion-button (click)="parseUrl()">Fetch Feed </button>

    <ion-list>

        <ion-item-sliding *ngFor="let entry of entries">

            <ion-item>
                <a (click)="openUrl(entry)"></a>
            </ion-item>


        </ion-item-sliding>

    </ion-list>
</ion-content>

index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Nødnummer</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>
    <script src="assets/rss-feed.js"></script>
  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

The rss-feed.js file i am importing is something i got from the tutorial, and is this file : https://github.com/bobby-brennan/rss-parser/blob/master/dist/rss-parser.min.js

Anyone knows what i am missing here?
Is it easier to just display one feed (without having to write the url everytime) automaticly? That is my end goal.

Kind regards
Kristoffer

2

You declare the var RSSParser, then you try to use a method parseURL(). Where should this come from?

3

Where the feed should come from? or the method?
I was just trying to follow the tutorial. Abit green on the subject, so was looking for some guidance. Thanks for the feedback though!

4

You seem to have stopped partway through that tutorial. Specifically, it doesn’t look like you got to the part where:

Next add the parseUrl method

5

Wow. You are absolutley right… So sorry about that.

I have gone through the whole thing again, and ended up with a different error this time:
“Unexpected value ‘ContactPage’ declared by the module ‘AppModule’. Please add a @Pipe/@Directive/@Component annotation.”

I am sorry about this. But anyone that can help me here?

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { InsurancePage } from '../pages/insurance/insurance';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { NodnummerPage } from '../pages/nodnummer/nodnummer';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { GoogleMaps} from '@ionic-native/google-maps';
import { InAppBrowser } from '@ionic-native/in-app-browser';


@NgModule({
  declarations: [
    MyApp,
    InsurancePage,
    ContactPage,
    HomePage,
    TabsPage,
    NodnummerPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    InsurancePage,
    ContactPage,
    HomePage,
    TabsPage,
    NodnummerPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    GoogleMaps,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

app.components.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { InAppBrowser } from '@ionic-native/in-app-browser';


import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(public platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
openUrl() {

        this.platform.ready().then(() => {
            let browser = new InAppBrowser("https://www.techiediaries.com",'_blank');

        });
}    
}

contact.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';


declare var RSSParser;
@IonicPage()

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'


})


export class ContactPage {
targetUrl : string ;
entries : Array<any> = [];
constructor(public navCtrl: NavController, public navParams: NavParams , private iab: InAppBrowser) {

}

ionViewDidLoad() {
    console.log('ionViewDidLoad ContactPage');

}
openUrl(entry){

    this.iab.create(entry.link,"_system");

}
parseUrlWrapper(){

    return new Promise((resolve,reject)=>{
    RSSParser.parseURL(this.targetUrl, function(err, parsed) {
        console.log(parsed.feed.title);
        console.log(parsed.feed.entries);
        if(err){
        reject(err);
        }
        resolve(parsed.feed.entries);
    });
    });

}
parseUrl(){
    this.parseUrlWrapper().then((entries : Array<any>)=>{
        this.entries = entries;
    })
}

}

contact.html

<ion-header>

    <ion-navbar>
        <ion-title>Ionic 3 RSS/ATOM Reader</ion-title>
    </ion-navbar>

</ion-header>


<ion-content padding>
    <ion-input [(ngModel)]="targetUrl" placeholder="Please enter an RSS/Atom Feed URL"></ion-input>
    <button ion-button (click)="parseUrl()">Fetch Feed </button>

    <ion-list>

        <ion-item-sliding *ngFor="let entry of entries">

            <ion-item>
                <a (click)="openUrl(entry)"></a>
            </ion-item>


        </ion-item-sliding>

    </ion-list>
</ion-content>

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Nødnummer</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>
    <script src="assets/rss-feed.js"></script>
  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>
6

The solution for me was using it like this
let parser= new RSSParser();
return new Promise((resolve, reject) => {
parser.parseURL(environment.rssfeedurl, function(err, parsed) {
console.log(parsed.items);
if (err){
reject(err);
}
resolve(parsed);
});
});