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>
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 {
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With