Unhandled Promise rejection: expression.split is not a function when using Splitter
-
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!
-
This is happening because I cant’t push a page containing ons-splitter which is weird
-
Hi can someone help me here?
-
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)