Angular JS: "Uncaught Error: [$injector:modulerr] Failed to instantiate module..." and a blank view

Question

I'm working through the Thinkster tutorial to implement it with Ruby on Rails. However, I've come across a couple of errors, and for all my hunting / trial and error haven't been able to fund a solution.

I'm currently getting the following error when I load a page:

Uncaught Error: [$injector:modulerr] Failed to instantiate module flapperNews due to:
Error: [$injector:modulerr] Failed to instantiate module Devise due to:
Error: [$injector:nomod] Module 'Devise' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

This is from the source angular.js.

It's also only rendering a blank page at the moment, and I'm not sure if this is related.

All the views are handled by the Angular UI Router, so my assumption is there's a problem with my implementation there, while from a little reading around this error seems to occur when the .js files are loaded in the wrong order; however, I've found no solutions, and have no idea if the two problems are tied together or entirely separate.

Here's a little code I imagine will be relevant:

application.js:

//= require angular
//= angular-devise
//= require angular-rails-templates
//= require angular-ui-router
//= require_tree

The page header:

<head>
  <title>...</title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
</head>

The routes are defined in the app.js file as per the tutorial, here (which I hope incorporate everything correctly):

angular.module('flapperNews', ['ui.router', 'templates', 'Devise'])
//config file    
.config([ 
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

  $stateProvider //router
    .state('home', {
      url: '/home',
      templateUrl: 'home/_home.html',
      controller: 'MainCtrl'
    });
  $stateProvider  
    .state('posts', {
      url: '/posts/{id}',
      templateUrl: 'posts/_posts.html',
      controller: 'PostsCtrl'
    });
  $stateProvider  
    .state('login', {
      url: '/login',
      templateUrl: 'auth/_login.html',
      controller: 'AuthCtrl',
      onEnter: ['$state', 'Auth', function($state, Auth) {
        Auth.currentUser().then(function (){
          $state.go('home');
        });
      }]
    });
  $stateProvider  
    .state('register', {
      url: '/register',
      templateUrl: 'auth/_register.html',
      controller: 'AuthCtrl',
      onEnter: ['$state', 'Auth', function($state, Auth) {
        Auth.currentUser().then(function (){
          $state.go('home');
        });
      }]
    });

  $urlRouterProvider.otherwise('home');
}]);

The other source I've considered for the problem is the dependencies not working together correctly, so here's where they're coming from at the moment:

My Gemfile:

source 'https://rubygems.org'


gem 'rails', '4.2.0'
gem 'sqlite3'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'angular-rails-templates'
gem 'responders', '~> 2.0'
gem 'angular_rails_csrf'
gem 'devise'

group :development, :test do
  gem 'byebug'
  gem 'web-console', '~> 2.0'
  gem 'spring'
end

And bower.json:

{
  ...
  ],
  "license": "MIT",
  "ignore": [...
  ],
  "dependencies": {
    "angular": "~1.3.15",
    "angular-ui-router": "~0.2.13",
    "bootstrap": "~3.3.4",
    "angular-devise": "~1.0.2"
  }
}

I hope that all makes sense, and apologies for any obvious newbie errors. Let me know if any other code will be useful. All help much appreciated!

Thanks in advance, Steve.

Angular is unable to find Devise. Can you post your index.html or your require.js config? — David says Reinstate Monica
– David says Reinstate Monica, Commented Mar 23, 2015 at 19:10
Hi @rob - nope, all the views are rendered in the <ui-view></ui-view> in the application.html.erb file. I've followed the tutorial where all the includes were moved from the header to application.js (above). I thought this would cover it, but let me know if I'm wrong there. Is this where I'm going wrong? — SRack
– SRack, Commented Mar 23, 2015 at 19:15
Update - think I've got it, the documentation for Angular-Devise says to include it slightly differently in the Gemfile. Adding source "https://rails-assets.org" do gem "rails-assets-angular-devise" end and //= require angular-devise/lib/devise to application.js seems to fix the error (though I'm now getting a different one). Thanks for the help you two :) — SRack
– SRack, Commented Mar 23, 2015 at 19:18

CharlieG. · Accepted Answer · 2015-03-23 21:41:32Z

1

I think you just missed the word 'require' in application.js file. It should be //= require angular-devise

answered Mar 23, 2015 at 21:41

CharlieG.

1831 gold badge1 silver badge11 bronze badges

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

Collectives™ on Stack Overflow

Angular JS: "Uncaught Error: [$injector:modulerr] Failed to instantiate module..." and a blank view

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