Issues arise when Angular Meteor fails to load the UI-Router properly

Currently, I am exploring the integration of ui-router for routing within a meteor-angular application. My reference point is the meteor Whatsapp tutorial which can be found here

Below is the relevant code snippet related to ui-router implementation:

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

Following the login screen, instead of transitioning to another view as intended, an error message is displayed 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 №1

Your app.js file should have a different order of load function calls, like this:

// Importing libraries
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';

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

const App = 'Whatsapp'; // App name

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

// Load controllers and routes
new Loader(App)
    .load(LoginController)
    .load(Routes);

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

// Bootstrap the Angular application when ready
function onReady() {
  Angular.bootstrap(document, [App]);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to showcase MySQL data within an Angular application?

During the covid-19 lockdown, I decided to pick up SQL as a hobby. I've managed to successfully retrieve data from my SQL database, but now I'm facing a challenge. I'm struggling with repeating the table using Angular.js based on the data ob ...

Scrolling the y-axis with a fixed height limit to prevent overflow

My current dilemma is a seemingly simple one: <div class="container"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div>​ Within the container, there are 3 divs: A and B ...

Is there a way to emphasize selected options on hover in the dropdown menu I made using Bootstrap?

I have successfully implemented a dropdown menu that appears when clicking on a text box. However, I would like to enhance the user experience by adding a hover effect to highlight the strings in the dropdown list. How can I achieve this functionality? &l ...

How can a static website incorporate a local image without the need for backend functionality?

I have a unique challenge with my static website. It is designed to display a local image from the user's computer without utilizing a traditional backend system. The website itself is hosted on a static file server, and all image processing must be d ...

Transfer information from the server to the client using NodeJS and Express

I am encountering an issue with sending data from my express server to the client side. I have implemented app.post and app.get, however the problem is that the request needs to originate from the client side. My requirement is to send the data from the se ...

A guide on updating URLs that are not enclosed within an anchor tag using JavaScript

In my current scenario, I am dealing with text that includes URL links presented in two different formats. www.stackoverflow.com <a href="http://www.stackoverflow.com">Stack over flow</a> My objective is to create a straightforward function ...

Is it possible to generate a form dynamically in a Vue.js HTML file based on JSON data? Check out the provided f

Currently, I am diving into the world of vue.js and experimenting with building a dynamically created form. To explain further, I have JSON files that define what input types should be included in the form; now I am figuring out how to implement this usin ...

Guide on including a JavaScript file in HTML during execution on Node.js

I have developed a basic nodeJs server with the following code in my server.js file: var http = require('http'); var fs = require('fs'); var path = require('path'); var server = http.createServer(function(req, resp){ // P ...

Tips for maintaining the InteractionCollector's presence even after a Discord.js bot reboot

One of the tasks my AI assistant handles is processing proposals submitted through Google Forms and transferring them to a designated channel where individuals can cast their votes by selecting either Yes or No using the corresponding MessageButton. Once ...

The process of extracting values from an HTML tag using Angular interpolation

I am working on an Angular application that has the following code structure: <p>{{item.content}}</p> The content displayed includes text mixed with an <a> tag containing various attributes like this: <p>You can find the content ...

Utilizing Google Maps API to update ImageMapType Overlay

I am utilizing the Google Maps JavaScript API to showcase weather data from a tile server. The specific tile server can be accessed here: To display the tile server, I am utilizing an ImageMapType and incorporating it into the Google Map's overlayMap ...

The process of deleting lines from an image using Javascript

If I have an image of a data-table and I want to eliminate all the grid lines (defined as continuous vertical or horizontal pixels), is there a way to achieve this using Javascript's image data manipulation? I envision looping through a 2D array conta ...

Utilizing AngularJS to assess expressions within an HTML tag

This question presents a unique scenario that sets it apart from other similar questions like those found here or here. The objective here is to "evaluate inside the HTML tag" rather than within a directive or controller. The explanation might be challengi ...

When working with Node.js, it is important to properly export your Oracle database connection to avoid encountering an error like "TypeError: Cannot read property 'execute

Hey there, I am a newbie when it comes to Node.js and Oracle. I've managed to create an app and establish a successful connection to the database. Now, I'm trying to figure out how to utilize the connection object throughout my application. Any s ...

Discovering routes in Angular2

I'm attempting to replicate something similar to this example here: AngularJS show div based on url/condition <span id="page-locator" *ngIf="location.path() == '/overview'">test</span> Unfortunately, it's not working as ex ...

Verify if the array entries match

Within my select element, I populate options based on an array of values. For example: [{ name: 'A', type: 'a', }, { name: 'B', type: 'b', }, { name: 'B', type: 'b', }, { name: &apos ...

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters

Exploring the creation of a FAQ section with individual carousels for each item. My primary objective is for the carousel to transition to the next chapter when advancing beyond the last slide (backwards navigation would be a future enhancement). I'v ...

Executing a function should be delayed until all necessary information is obtained from the REST Api

I want to create a chart showing data for each month over the course of 12 months. The data for each month will be retrieved from a REST API. Here is my approach: $.getJSON(link, function(data){ // store data in a variable } Repeat this process 12 t ...

What is the best way to create a new object in a Vue component with optimal efficiency?

Currently, I am working on initializing a map that would be utilized in my calculatePrice function. calculatePrice(key) { let prices = new Map({ 0: 17, 1: 19, 2: 24, 3: 27, 4: 30, 5: 46, 6: 50 ...

Leveraging the power of AngularJS within an ASP.NET MVC architecture, bypassing

Looking to incorporate AngularJS with ASP.NET MVC for my website, while utilizing Active Directory for authentication. ASP.NET MVC seems like the best choice for routing and handling authentication/authorization. My plan is to create a _Layout.cshtml page ...