Cannot read property 'title' of undefined

Question

I have an Ionic app that connects to a webservice that translates RSS to JSON and then displays news items.

Everything is working fine expect that I am getting an annoying error in the console: ERROR TypeError: Cannot read property 'title' of undefined UutinenPage.html:13

Here's my Stackblitz: https://stackblitz.com/github/avaliaho/io-tech-uutiset/

As a sidenote: if anyone can fix the Stackblitz error for me and also mention what was changed, I'd be grateful:

Error in /turbo_modules/@angular/compiler@7.2.5/bundles/compiler.umd.js (2496:21)
Can't resolve all parameters for ApplicationModule: (?).

EDIT:

uutinen.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>io-tech uutiset</ion-title>
    <ion-buttons slot="start">
      <ion-button (click)="meneTakaisin()">
        <ion-icon slot="start" name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <h1>{{ uutinen.title }}</h1>
  <p>{{ uutinen.pubDate }} {{ kirjoittaja[1] }}</p>
  <img [src]="kuva">
  <p [innerHTML]="sisaltoIlmanLinkkeja"></p>
</ion-content>

uutinen.page.ts:

import { Component, OnInit } from '@angular/core';
import { UutisetService } from '../uutiset.service';
import { uutinen } from '../uutinen.interface';
import { uutissyote } from '../uutissyote.interface';
import { ActivatedRoute, Router } from '@angular/router';

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

  uutinen: uutissyote;
  id: number;
  kuva: string[] = [];
  sisalto: string[] = [];
  sisaltoIlmanLinkkeja: string;
  kirjoittaja: string[] = [];

  constructor(
    private service: UutisetService, 
    private reitti: ActivatedRoute,
    private reititin: Router) { }

  ngOnInit() {
    this.id = +this.reitti.snapshot.paramMap.get('id');

    this.service.haeKaikki().then((data: uutinen) => {
      this.uutinen = data.items[this.id];
      this.kirjoittaja = data.items[this.id].author.split(" ");
      this.kuva = data.items[this.id].thumbnail.split('"');
      this.sisalto = data.items[this.id].content.split("<br><br><br>");
      this.sisaltoIlmanLinkkeja = this.sisalto[1].replace(/<a\b[^>]*>(.*?)<\/a>/i,"")
    })
  }

  meneTakaisin = () => {
    this.reititin.navigateByUrl("/home");
  }

}

uutinen.service.ts:

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

@Injectable({
  providedIn: 'root'
})
export class UutisetService {

  urli = "https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fbbs.io-tech.fi%2Fforums%2Fio-tech-fi-uutiset.67%2Findex.rss";

  constructor(private http: HttpClient) { }

  haeKaikki = () => {
    return new Promise((resolve, reject) => {
      this.http.get(this.urli).subscribe((data) => {
        resolve(data);
      }, (error) => {
        reject(error);
      })
    })
  }

}

Please add a [mcve] **here** and not as a link to another site — Suraj Rao, Feb 18 '19 at 07:11
Meanwhile, I found [this](https://github.com/angular/angular/issues/27531) — Suraj Rao, Feb 18 '19 at 07:16
I already tried to add `import 'core-js/es7/reflect'` into polyfills, but that unfortunately did not solve the issue. All I am getting is more errors. — aleksejjj, Feb 18 '19 at 07:17
Regarding `title` issue, you just have to use safe navigation operator since your data is received asynchronously from subscribe. Here is the [solution](https://stackoverflow.com/questions/43840008/cannot-read-property-of-xxx-of-undefined/43840065#43840065) — Suraj Rao, Feb 18 '19 at 07:22

Cannot read property 'title' of undefined

0 Answers0