CODEWITHSUNDEEP
angularurlionic-frameworklocationui-sref
iJames
iJames

Reputation: 650

Ionic Angular 1: ui-sref ui-router garbled url on ion-tab: "/#!/!/" and "/#!#%2F"

I had working tab navigation and I upgraded my packages.

Now when trying to navigate to a tab the urls are getting garbled up.

If my url is: /#!/messages, and I click on the Contacts tab, instead of going to /#!/contacts, the url becomes: /#!/!/contacts. 

<ion-tabs class="tabs-positive tabs-icon-top">
    <ion-tab title="Contacts" ui-sref="tab.contacts"></ion-tab>
    <ion-tab title="Messages" ui-sref="tab.messages"></ion-tab>
</ion-tabs>

I feel I've got a version problem with ionic and angular but I don't know where to start figuring this out.

Here's the basic routing (Typescript):

$stateProvider
    .state('tab', {
        abstract: true,
        templateUrl: "templates/includes/tab_bar.html"
    })
    .state('tab.contacts', {
        url: '/contacts',
        views: {
            'contacts': {
                templateUrl: 'templates/contacts.html',
                controller: 'ContactsController',
                controllerAs: '$ctrl'
            }
        }
    })
    .state('tab.messages', {
        url: '/messages',
        views: {
            'account': {
                templateUrl: 'templates/messages.html',
                controller: 'MessagesController',
                controllerAs: '$ctrl'
            }
        }
    })
$urlRouterProvider.otherwise(() => '/messages');

Tab navigation was working acceptably until I upgraded JavaScript modules up to the latest.

I'm sure somebody with nostalgia for the ancient version 1 has a memory of such problems?

I don't want to supplant this nice clean method with href or $state.go. The ui-sref seems like best practice. So I want resolve the problem, not hack a solution.

Thanks Much!

Upvotes: 0

Views: 54

Answers (0)

Related Questions