angular meteor ui-router not loading

Question

I am trying to use ui-router to handle the routing with a meteor-angular application. I am following the meteor Whatsapp tutorial here

Here's the code that deals with ui-router

login.controller.js

export default class LoginController extends Controller {

    login() {
        Meteor.loginWithFacebook({}, function(err){
            if (err) {
                throw new Meteor.Error('Facebook login error')
            } else {
                var user = Meteor.users.find().fetch();
                this.$state.go('tabs');
            }
        });
    }
}

LoginController.$inject = ['$state'];

routes.js

class RoutesConfig extends Config {
    configure() {
        this.$stateProvider
            .state('login', {
                url: '/login',
                templateUrl: 'client/templates/login.html',
                controller: 'LoginController as login'
            })
            .state('tabs', {
                url: '/tabs',
                templateUrl: 'client/templates/tabs.html'
            });

        this.$urlRouterProvider.otherwise('login');
    }
}

RoutesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];

class RoutesRunner extends Runner {
  run() {
    this.$rootScope.$on('$stateChangeError', (...args) => {
      const err = _.last(args);

      if (err === 'AUTH_REQUIRED') {
        this.$state.go('login');
      }
    });
  }
}

RoutesRunner.$inject = ['$rootScope', '$state'];

export default [RoutesConfig, RoutesRunner];

After the login screen, the app should go to another view, but instead I receive this message in the console.

Exception in delivering result of invoking 'login': TypeError: Cannot read property 'go' of undefined
    at http://localhost:3000/app/app.js?hash=8f1e5c5eb688417de85584fbdefdc289814dac42:151:17
    at Accounts.callLoginMethod.userCallback (http://localhost:3000/packages/accounts-oauth.js?hash=ac90001ebf17b2b7e1ebf1370330775b19248242:165:7)
    at http://localhost:3000/packages/accounts-base.js?hash=9a2df45ebeba9d14f693547bc91555a09feda78e:322:26
    at http://localhost:3000/packages/underscore.js?hash=27b3d669b418de8577518760446467e6ff429b1e:794:19
    at loggedInAndDataReadyCallback (http://localhost:3000/packages/accounts-base.js?hash=9a2df45ebeba9d14f693547bc91555a09feda78e:434:5)
    at MethodInvoker._callback (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:1105:22)
    at MethodInvoker._maybeInvokeCallback (http://localhost:3000/packages/ddp-client.js?hash=b5f1b97df6634673c68f37914ae9f4c3231c438e:3541:12)
    at MethodInvoker.receiveResult (http://localhost:3000/packages/ddp-client.js?hash=b5f1b97df6634673c68f37914ae9f4c3231c438e:3561:10)
    at Connection._livedata_result (http://localhost:3000/packages/ddp-client.js?hash=b5f1b97df6634673c68f37914ae9f4c3231c438e:4681:9)
    at onMessage (http://localhost:3000/packages/ddp-client.js?hash=b5f1b97df6634673c68f37914ae9f4c3231c438e:3369:12)

I agree, but that's not the issue. this.$state.go('link') results in an error that $state is undefined. — Tarang Hirani
– Tarang Hirani, Commented Jun 14, 2016 at 5:58
It would really be great if you could get this into a plunker — Tirthraj Barot
– Tirthraj Barot, Commented Jun 14, 2016 at 5:59
Can i share with you via gmail? Plunkr will not have the exact same project structure. — Tarang Hirani
– Tarang Hirani, Commented Jun 14, 2016 at 6:00

Tirthraj Barot · Accepted Answer · 2016-06-14 12:18:59Z

1

Your app.js should have inversed load function calls.. as

// Libs
import 'angular-animate';
import 'angular-meteor';
import 'angular-sanitize';
import 'angular-ui-router';
import 'ionic-scripts';
import Angular from 'angular';
import Loader from 'angular-ecmascript/module-loader';
import { Meteor } from 'meteor/meteor';

// Modules
import LoginController from '../controllers/login.controller';
import Routes from '../routes';

const App = 'Whatsapp';

// App
Angular.module(App, [
  'angular-meteor',
  'ionic'
]);

new Loader(App)
    .load(LoginController)
    .load(Routes);

// Startup
if (Meteor.isCordova) {
  Angular.element(document).on('deviceready', onReady);
}
else {
  Angular.element(document).ready(onReady);
}

function onReady() {
  Angular.bootstrap(document, [App]);
}

answered Jun 14, 2016 at 12:18

Tirthraj Barot

2,6792 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular meteor ui-router not loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related