ion-split-pane isn't working as expected - ionic-framework

Question

I'm trying to add the split pane to my first view just as say in the documentation, but it isn't working with ionic serve or ionic deploy browser.
I'm using the following:
cli packages: (/usr/lib/node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
#ionic/app-scripts : 3.1.9
Cordova Platforms : android 7.0.0 browser 5.0.3
Ionic Framework : ionic-angular 3.9.2
System:
Node : v8.11.0
npm : 5.6.0
OS : Linux 4.15
And the code for the view is this:
<ion-split-pane when="xs">
<!-- Side Menu -->
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item menuClose ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<!-- Content -->
<ion-nav [root]="rootPage" main #content></ion-nav>
</ion-split-pane>
I don't now if there was some change from ionic 3 to 4 that wasn't added to the documentation or if I need to add something else for this to work.

Answer 1

I was using the ionic template super and for some reason it has two menus, one in the app.module.ts template and one as a page.
The one on app.ts looks like this:
#Component({
// Menu lateral
template: `<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Olá</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>`
})
So I changed it to :
#Component({
template: `<ion-nav #content [root]="rootPage"></ion-nav>`
})
And now the ion-split-pane pane is working without any problem.