Unhandled Promise rejection: expression.split is not a function when using Splitter

jcfrane

Hi I have the following setup when using the ons-splitter.

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // We should have a Blank Page
  initialPage: any = DashboardPage;

  constructor() { 

  }

  ngOnInit(): void {
  }
}

app.component.html

<ons-navigator [page]="initialPage"></ons-navigator>

dashboard.page.ts

@Component({
    selector: 'ons-page[dashboard]',
    templateUrl: './dashboard.page.html',
})
export class DashboardPage implements OnInit {
    sidePage = SidenavPage;
    contentPage = ContentPage;

    //@ViewChild('splitter') splitter;

    constructor(private navigator: OnsNavigator, private sideNavService: SidenavService) {
        //this.sideNavService.menu$.subscribe(() => this.splitter.nativeElement.side.open());
    }

    ngOnInit(): void {
    }

    navigate(): void {
        this.navigator.element.pushPage(DepositPage);
    }
}

dashboard.page.html

<ons-splitter #splitter>
  <ons-splitter-side [page]="sidePage" side="left" width="220px" collapse swipeable>
  </ons-splitter-side>

  <ons-splitter-content [page]="contentPage">
  </ons-splitter-content>
</ons-splitter>

content.page.ts

@Component({
    selector: 'ons-page[content]',
    templateUrl: './content.page.html',
})
export class ContentPage implements OnInit {
    constructor() {

    }

    ngOnInit(): void {
    }
}

content.page.html

<ons-toolbar>
<div class="left">
    <ons-toolbar-button (click)="openMenu()">
    <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
    </ons-toolbar-button>
</div>
<div class="center">Content Page</div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
Swipe right to open the menu!
</p>

and lastly, sidenav.page.ts

@Component({
    selector: 'ons-page[sidenav]',
    templateUrl: './sidenav.page.html',
})
export class SidenavPage implements OnInit {
    constructor() {

    }

    ngOnInit(): void {
    }
}

sidenav.page.html

<ons-toolbar>
    <div class="center">Left Page</div>
</ons-toolbar>
<div class="background"></div>
<div class="content">

</div>

So the AppComponent display the DashboardPage as the initial page for ons-navigator. And DashboardPage has the splitter with the sidePage as the SidePage and the content as the ContentPage

What has caused the error I mentioned about?

Thanks!

jcfrane

This is happening because I cant’t push a page containing ons-splitter which is weird

jcfrane

Hi can someone help me here?