Angular/Meteor routing issue

Question

I'm trying the angular meteor whatsapp tutorial and I think I have a routing issue.

It's weird because I've followed every single step of the tuto.

The error is the following: nothing shows up in the browser. When I open the console, I have no error. The app is not crashing, otherwise I would have a crashing message in the browser. The path in the browser shows the one from this.$urlRouterProvider.otherwise('tab/chats');. In the browser it looks like this: http://localhost:3000/#/tab/chats.

Routes.js

import { Config } from 'angular-ecmascript/module-helpers';

import chatsTemplateUrl from '../templates/chats.html';
import tabsTemplateUrl from '../templates/tabs.html';

export default class RoutesConfig extends Config {
  configure() {
    this.$stateProvider
      .state('tab', {
        url: '/tab',
        abstract: true,
        templateUrl: tabsTemplateUrl
      })
      .state('tab.chats', {
        url: '/chats',
        views: {
          'tab-chats': {
            templateUrl: chatsTemplateUrl,
            controller: 'ChatsCtrl as chats'
          }
        }
      });

    this.$urlRouterProvider.otherwise('tab/chats');
  }
}

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

App.js

// 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 RoutesConfig from '../routes';
import ChatsCtrl from '../controllers/chats.controller';
import CalendarFilter from '..filters/calendar.filter';

const App = 'Whatsapp';

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

new Loader(App)
  .load(ChatsCtrl)
  .load(CalendarFilter)
  .load(RoutesConfig);

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

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

I've installed every dependency or package needed for the app. I don't understand why I have this error.

Thanks, have a good day :)

Answer 1

Two things:

You were missing angular-meteor-auth

Fixed with

meteor npm install --save angular-meteor-auth

Then in the browser console I see this:

Uncaught Error: Cannot find module '../controller/new-chat.controller'

The file doesn't exist, I fixed it, but you have a bunch of other mistakes there - I'll let you take it from here