14

I am trying to show an OAuthComponent in my GettingStartedPage component. The OAuthComponent is not showing up when served to my browser. No errors.

OAuthComponent.ts

import {Page, NavController} from 'ionic/ionic';
import {Component} from 'angular2/angular2'

@Component({
    templateUrl: "app/authentication/components/oauth-component.html",
    selector: "oauth-component"
})
export class OAuthComponent {

    private nav: NavController;

    constructor(nav: NavController) {
        this.nav = nav;
    }
}

oauth-component.html

<h1>
    Testing Something
</h1>

GettingStartedPage.ts

import {Page, NavController} from 'ionic/ionic';
import {OAuthComponent} from "../authentication/components/OAuthComponent";
import "./getting-started.scss";

@Page({
    templateUrl: 'app/getting-started/getting-started.html',
    directives: [OAuthComponent]
})
export class GettingStartedPage {

    private nav: NavController;

    constructor(nav: NavController) {
        this.nav = nav;
    }
}

getting-started.html

<ion-navbar *navbar>
    <a menu-toggle>
        <icon menu></icon>
    </a>

    <ion-title>Getting Started</ion-title>
</ion-navbar>

<ion-content>
    <main>
        <oauth-component></oauth-component>
    </main>
</ion-content>
||||||
9

All components in Angular2 must reference other components that appear in the view.

Ionic seems to handle this with their own @Page annotation, but it covers only Ionic specific components. decorators.ts explains this behavior.

You need to edit your code to include OAuthComponent in directives:

@Page({
    templateUrl: 'app/getting-started/getting-started.html',
    directives: [OAuthComponent] // Don't forget to import it
})
export class GettingStartedPage {
||||||
  • 1
    Added directives: [OAuthComponent] and the import. It is still not working. Modified my original post to include the directive change. – prolink007 Dec 2 '15 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.