Tarang Hirani Tarang Hirani - 5 months ago 30
AngularJS Question

angular meteor ui-router not loading

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)

Answer

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]);
}