Running app in ionic serve is fine but not with ionic build

Question

I am new to ionic. I was facing a problem when I need a back button on multiple page, switching between tab page and non-tab page. I forced back button to appear on certain page. It shown as expect. But it was buggy. So I fixed it by creative a parents for my original page, I named it 'main'. Then I route the rest of the existing page to main page and everything works fine when i use "ionic serve" command. So I test my app with a "ionic build ios" but the only page I see is the main page but not the child view.

I checked if I had set my main page config to abstract: true and I did. If my syntax was wrong, my apps shouldn't work at all from when I use "ionic serve". I am clueless.

This is my config code

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('main', {
      url: "",
      abstract: true,
      templateUrl: '/templates/main.html'
    })
    .state('main.tabs', {
      url: '/tab',
      abstract: true,
      views : {
        'main-content' : {
          templateUrl: '/templates/tabs.html'
        }
      }
    })
    .state('main.tabs.pageI', {
      url: '/pageI',
      views : {
        'Page_1' : {
          templateUrl: 'templates/pageI.html',
          controller: 'EventController'
        }
      }
    })
    .state('main.tabs.pageII', {
      url: '/pageII',
      views : {
        'Page_2' : {
          templateUrl : 'templates/pageII.html',
          controller : 'EventController'
        }
      }
    })
    .state('main.tabs.pageIII', {
      url: '/pageIII',
      views : {
        'Page_3' : {
          templateUrl : 'templates/pageIII.html'
        }
      }
    })
    .state('main.tabs.sub', {
      url: '/sub',
      views : {
        'Page_1' : {
          templateUrl : 'templates/sub.html',
          controller: 'AllController'
        }
      }
    })
    .state('main.info', {
      url: '/info/:aId',
      views : {
        'main-content' : {
          templateUrl: 'templates/Info.html',
          controller: 'SingleController'
        }
      }
    })
    .state('main.user', {
      url: '/user/:username',
      views : {
        'main-content' : {
          templateUrl : 'templates/user.html',
          controller : 'UserController'
        }
      }
    });
    $urlRouterProvider.otherwise('/tab/PageI');
})

This is the screenshot when I run "ionic serve --lab" ionic serve --lab

This is screenshot when I run "ionic emulate ios" ionic build ios

Answer 1

I find this embarrassing.

But I found the bug. In templateUrl in main and tabs. I write '/templates/main.html' and '/templates/tabs.html'. The browser automatically accept '/templates' as 'templates' directory. But in ionic it is not. I changed my code to 'templates/main.html' and 'templates/tabs.html' and now it work like charm.