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

Question

我正在研究 Thinkster tutorial 以在 Rails 上与 Ruby 一起实施它。然而，我遇到了一些错误，而且我所有的寻找/试验和错误都无法为解决方案提供资金。

我当前在加载页面时遇到以下错误：

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.

这来自来源angular.js。

目前也只是呈现一个空白页面，我不确定是否与此有关。

所有视图都由 Angular UI 路由器处理，所以我的假设是我的实现存在问题，而从周围的一些阅读来看，这个错误似乎发生在 .js 文件加载顺序错误；但是，我没有找到任何解决方案，也不知道这两个问题是联系在一起的还是完全分开的。

这里有一些我认为相关的代码：

application.js:

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

页眉：

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

根据教程在 app.js 文件中定义路由，此处（我希望正确包含所有内容）：

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

我考虑过的另一个问题来源是依赖项不能正确协同工作，所以目前它们来自这里：

我的 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

和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"
  }
}

我希望一切都有意义，对于任何明显的新手错误，我们深表歉意。让我知道是否还有其他代码有用。非常感谢所有帮助！

提前致谢，史蒂夫。

Answer 1

我认为您只是在 application.js 文件中遗漏了 'require' 这个词。它应该是 //= require angular-devise

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

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

ruby-on-rails

node.js

angularjs

angular-routing

angular-ui-router