Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: Deprecation warnings with the ion-split-pane

See original GitHub issue

Bug Report

Ionic version:

[x] 4.x

Current behavior:

deprecation warnings Expected behavior:

none Steps to reproduce:

Related code:

<ion-app>
  <ion-split-pane>
    <ion-menu class="dark">
      <ion-header class="ion-text-center dark" no-border>
        <ion-toolbar color="dark">
          <ion-title item-center class="dark ion-text-center">
            <img src="assets/company-logo.svg" alt="imagen de la compañia" />
          </ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="dark">
        <ion-list class="dark" lines="none" mode="ios">
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" color="dark">
              <ion-icon slot="start" [src]="p.icon"></ion-icon>
              <ion-label>
                {{ p.title }}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Other information:

the warning instructions are pretty lack-luster as whenever I try to follow the instructions it fails to compile because I need to have a main for the slide action to listen on. According to the warning it should be this way;

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu class="dark" contentId="my-content">
      <ion-header class="ion-text-center dark" no-border>
        <ion-toolbar color="dark">
          <ion-title item-center class="dark ion-text-center">
            <img src="assets/company-logo.svg" alt="imagen de la compañia" />
          </ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="dark">
        <ion-list class="dark" lines="none" mode="ios">
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" color="dark">
              <ion-icon slot="start" [src]="p.icon"></ion-icon>
              <ion-label>
                {{ p.title }}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

however this fails to compile, should we leave the warnings as they are now? Ionic info:

insert the output from ionic info here

Issue Analytics

State:
Created 4 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

2reactions

liamdebeasicommented, Oct 10, 2019

Your code should be:

<ion-split-pane contentId="my-content">
  <ion-menu contentId="my-content"> ... </ion-menu>
  <ion-router-outlet id="my-content"></ion-router-outlet>
</ion-split-pane>

The div in the warning refers to your main content (we didn’t want to use ion-router-outlet since vanilla Ionic apps do not use that).

1reaction

liamdebeasicommented, Oct 16, 2019

contentId needs to be “my-content” which is the ID for the router outlet.