Monaca Onsen UI Discord Chat Github Repo

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?