Ionic-framework: bug: Deprecation warnings with the ion-split-pane

[ctfrancia]

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

[liamdebeasi]

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).

[ctfrancia]

updated it to

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu class="dark" contentId="main-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 id="my-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

however now won't show because of the error

split pane does not have a specified main node

[liamdebeasi]

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

[ctfrancia]

finally! I don't see any more dep warnings in the console! XD

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.