Fixing [ion-menu] and [ion-split-pane] deprecation warnings in Ionic 5

The Ionic team announced the availability if Ionic 5 on February 11th, 2020 and while I was excited to upgrade I was also hesitant as well due to past difficulties upgrading major versions. Recently I’ve been working on a few ionic apps (cordova and PWA) that were still running on ionic 4.9.x and decided to upgrade both to version 5 so I don’t fall to far behind. For the most part, the upgrades were indeed easy but be sure to read the breaking changes.

The two main issues I faced were the deprecation of @ionic/angular Event and the main attribute on ion-menu and ion-split-pane.

1. Event

I won’t cover much on this here because there’s already a great writeup by @snagrawal titled “Dealing with breaking change in Ionic 5” that provides an excellent alternative to the Event issue using rxjs.

2. Main Attribute Deprecation

My PWA was based on the Ionic Menu starter and after upgrading to Ionic 4 release (4.11.10) as recommended, I started noticing deprecation warnings in the Chrome developer tools console.

[DEPRECATED][ion-menu] Using the [main] attribute is deprecated, please use the "contentId" property instead:
BEFORE:
  <ion-menu>...</ion-menu>
  <div main>...</div>

AFTER:
  <ion-menu contentId="my-content"></ion-menu>
  <div id="my-content">...</div>
[DEPRECATED][ion-split-pane] Using the [main] attribute is deprecated, please use the "contentId" property instead:
BEFORE:
  <ion-split-pane>
    ...
    <div main>...</div>
  </ion-split-pane>

AFTER:
  <ion-split-pane contentId="main-content">
    ...
    <div id="main-content">...</div>
  </ion-split-pane>

After doing some quick searches, I found that many others were having the same issue, but there weren’t any clear solutions. So, after a few trial and error changes I was able to clear the deprecation warnings with a few small edits in app.component.html.

First, add the contentId attribute to ion-split-pane and ion-menu tags:

<ion-split-pane contentId=”main”>
<ion-menu contentId=”main” type=”overlay”>

Next, replace main on ion-router-outlet with the id attribute

<ion-router-outlet id=”main”></ion-router-outlet>

Assuming you’re running ionic serve, save your changes and after the browser reloads the warnings should now be gone.