Ionic 2 - Potential typescript circular include cycle that refuses to be broken, causing error

I’ve been working with Ionic 2 to build a mobile app and basically I’m stuck in a situation where I’m getting an error like this:

EXCEPTION: Error: Uncaught (in promise): Unexpected directive value 'undefined' on the View of component 'TopicFeedPage'

I have a feed page (feed.html, feed.ts) that contains a component () like this:

<ion-list [hidden]="chosenFilter !== 'all'">
    <ion-card class="post-card" *ngFor="#post of posts">

      <!-- Post Added -->
      <post-added *ngIf="post.vfeedtype === 1" [post]="post"></post-added>
    </ion-card>
  </ion-list>

Inside the component, I have a button that pushes to a page that is a separate type of feed where I’m trying to use the same component (pretty much exact same code). However, in the .ts file for the second feed, when I try to add the directive for the component in the @Page object, it gives me the error above.

Here is the code for the component:

import {Component, Input} from 'angular2/core';
import {NavController} from 'ionic-angular';
import {TopicFeedPage} from '../../pages/topic-feed/topic-feed';
import {PostAddedDetailPage} from '../../pages/post-added-detail/post-added-detail';

@Component({
  selector: 'post-added',
  templateUrl: 'build/components/post-added/post-added.html'
})
export class PostAdded {
  @Input() post: any;

  constructor(private nav: NavController) {}

  goToFeedTopic() {
    this.nav.push(TopicFeedPage, this.post);
  }

  goToPost() {
    this.nav.push(PostAddedDetailPage, this.post);
  }

  ngOnInit() {
    this.title = this.post.title.replace(/(<([^>]+)>)/ig,"");
  }
}

After some research, I found that the error could be due to a circular typescript include cycle and that I should utilize forward references. I have tried all of this and still am getting the same error. Would anyone be able to shed some light on this for me? I’m still new to Angular 2.

Here is the code for the second feed that gets the error from above (topic-feed.html, topic-feed.ts):

import {Page, NavParams} from 'ionic-angular';
import {Component, Inject, forwardRef} from 'angular2/core';
import {TopicData} from '../../providers/topic-data/topic-data';
import {PostAdded} from '../../components/post-added/post-added';


@Page({
  templateUrl: 'build/pages/topic-feed/topic-feed.html',
  directives: [PostAdded]
})
export class TopicFeedPage {

  topic: any;
  topicData: any;
  topicDetail: any;
  topicName: any;
  posts: any;
  topicInfo: any;

  constructor(
    private navParams: NavParams,
    private topicFeed: TopicData,
    @Inject(forwardRef(() => PostAdded)) PostAdded
  ) {
    this.topic = navParams.data;

    this.topicDetail = JSON.parse(this.topic.details);

    // Pull the topic name out
    this.topicName = this.topicDetail.topic.topicName;

    // Get the Topic data
    this.topicFeed.getSingleTopicFeed(this.topicDetail.topic.topicId).then(data => {
      this.posts = data.feed;
      this.topicInfo = data.topic;
    });
  }
}

Thankya thankya!

This is also a reference to my question in stack overflow: http://stackoverflow.com/questions/36974113/ionic-2-potential-typescript-circular-include-cycle-that-refuses-to-be-broken

could you isolate this into a smaller demo?

It’s kind of hard to debug this which just snippets.

A small demo in a github repo should do

Why does TopicFeedPage's constructor have any references to PostAdded at all?

Hey @mhartington, thanks for getting back to me. I have created a simple github repo with the most basic example here:

git@github.com:snstarosciak/ionic2-test.git

Credentials upon app startup to get feed data

username: c1555211@trbvn.com
password: puhpuhpassword

In order to recreate the issue, when you login and see the feed, tap on any of the names at the top of each card that say “Clash Royale”, then you’ll see the errors I’m getting.

When you look into the code, the file that has the errors happening is in /app/pages/topic-feed/topic-feed.ts

I feel like this is one of those issues where when I figure it out, I’m just gonna feel so derpy haha. Anyway, thanks for looking into it for me :slight_smile:

oh and I want to apologize for pushing all of my node modules as well. I think I had mucked something up when I was messing with another one and changing .json files of others so I figured it’d be just easier to add all of them in there.

That’s a good question. Does that impact whether the thing will work? I took it out and it made no difference, which I suppose is expected. Do you have any suggestions to getting this error to go away and for my components to actually show up in the view?

@snstarosciak have you ound a better option then include directives in app.ts level?

Or someone has any tip?
I’ve just did this to solve my problem but I really don’t need all this directives in my whole app…