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