Ion-split-pane work on angular?

Ionic Framework Ionic Angular
1

I started out with Ionic using React (don’t even bother) and had an IonSplitPane working in that project. I escaped to Angular and started a new tabbed app and typed in my split pane elements just as I had them on React but I get a cryptic error:

image

image
image906×709 23.7 KB

I have tried using the syntax from the documentation and have scoured the internet looking for a solution to this error. No matter how I define content, contentId, or whatever and match up the ID with my menu and main content the split-pane just blows up. I’m happy to cobble together my own split-pane master/detail component but it would be nice if this worked or was at least removed from the docs. I’m on all the latest default framework versions…whatever comes with “ionic start.”

2

In the error message, it shows an ion-nav with the id content e.g. #content.

Do you have an element like that in your markup with that id?

3

That is an example provided by the error message. There is no ion-nav in my code.

4

Yeah I know, that’s what I’m saying. If there’s no element with the Id of content then it’s gonna fail surely.

This is one of mine that works:

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

etc…