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?

tahir-jamil

i have the same issue

globalErrorHandler.service.ts:40 Error: Uncaught (in promise): TypeError: expression.split is not a function
TypeError: expression.split is not a function
    at Object._parseExpression (onsenui.js:994)
    at Object.evaluate (onsenui.js:1012)
    at Object.push../node_modules/onsenui/js/onsenui.js.internal$1.getPageHTMLAsync (onsenui.js:1195)
    at PageLoader.loadPage [as _loader] (onsenui.js:6809)
    at PageLoader.load (onsenui.js:6857)
    at onsenui.js:22346
    at new ZoneAwarePromise (zone.js:913)
    at onsenui.js:22345
    at HTMLElement._pushPage (onsenui.js:22378)
    at HTMLElement.pushPage (onsenui.js:22344)
    at resolvePromise (zone.js:832)
    at resolvePromise (zone.js:784)
    at zone.js:894
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:28129)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:601)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:507)
    at ZoneTask.invoke (zone.js:492)