Ion-content hidden when using angular 2 router-outlet

I am facing an issue where the content is hidden behind my header when the page loads, or navigates to any other page.

I am using angular 2 router instead of the ionic router.

<router-outlet></router-outlet>
<!--<ion-nav [root]="rootPage"></ion-nav>-->

When this homepage gets rendered, it’s hidden.

<ion-header>
    <ion-navbar>
        <ion-title>
            Home
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button color="primary">Button A</button>
    <button ion-button color="secondary">Button B</button>
    <button ion-button color="light">Button C</button>
    <button ion-button color="dark">Button D</button>
    <button ion-button clear>Button E</button>
</ion-content>

My current workaround is simply resizing the content on page load, but hoping to not have to do this.

@ViewChild(Content) content: Content;
 ngOnInit() {
    this.content.resize();
 }

Any thoughts? I’ve seen this issue posted all over the place, but no solutions that resolve my issue, other than the one I listed above that I found myself.


Hi, @Raziaar. Have you notices about this?

Best regards!!