Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 Component not showing

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>
like image 888
prolink007 Avatar asked Dec 01 '15 22:12

prolink007


1 Answers

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 {
like image 100
Nemanja Miljković Avatar answered Nov 06 '22 05:11

Nemanja Miljković