Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

splitterContent error when use ons-splitter-content with tabbar

  • I follow this link: to make a Todo App.
    Here my code:

      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
      <script src="components/loader.js"></script>
      <script src="lib/angular/angular.min.js"></script>
      <script src="lib/onsenui/js/onsenui.min.js"></script>
      <script src="lib/onsenui/js/angular-onsenui.js"></script>
      <script src="js/app.js"></script>
      <script src="js/services.js"></script>
      <script src="js/controllers.js"></script>
      <link rel="stylesheet" href="components/loader.css">
      <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
      <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
      <link rel="stylesheet" href="css/style.css">
      <!-- First navigation component: Navigator. This will remain always on top of the app. -->
      <ons-navigator id="myNavigator" page="splitter.html">
      <!-- Second navigation component: Splitter. This will disappear if the first component changes its content. -->
      <ons-template id="splitter.html">
        <ons-splitter id="mySplitter">
          <ons-splitter-side page="html/menu.html" swipeable width="250px" collapse swipe-target-width="50px">
          <ons-splitter-content page="tabbar.html">
      <!-- Third navigation component: Tabbar. This will disappear if the first or second components change their content. -->
      <ons-template id="tabbar.html">
          <ons-page id="tabbarPage">
              <div class="left">
                <!-- Toolbar-button with different icons depending on the platform. -->
                <ons-toolbar-button component="button/menu">
                  <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
              <div class="center">To-Do List App 2.0</div>
              <div class="right">
                <!-- Toolbar-button  only visible for iOS/other. -->
                <ons-if platform="ios other">
                  <ons-toolbar-button component="button/new-task">New</ons-toolbar-button>
            <!-- Floating Action Button only visible for Android. -->
            <ons-if platform="android">
              <ons-fab position="right bottom" component="button/new-task">
                <ons-icon icon="md-edit"></ons-icon>
            <!-- Auto-positioned Tabbar: top on Android, bottom on iOS/other. -->
            <ons-tabbar id="myTabbar" position="auto">
              <ons-tab page="html/pending_tasks.html" label="Pending" active>
              <ons-tab page="html/completed_tasks.html" label="Completed">

    And app.js:

          .controller('AppController', function() {
    ons.ready(function() {
        console.log("Onsen UI is ready!");

    But when i run then error:
    and show detail:

    Version: /*! angular-onsenui.js for onsenui - v2.0.3 - 2016-10-26 */