requirejs 和 angularjs 1.5 组件注入 ui.router 失败

Question

我在使用推荐的组件加载方法时遇到此错误 (See step 3 )

  Error: Module name "angular-ui-router" has not been loaded yet for context: _. Use require([])

应用模块定义：

<script>
  var adminApp = angular.module('adminClientApp', [require('angular-ui-router'), 'ngMaterial', 'ngResource', 'ngMessages', 'ngMdIcons']);
</script>

根据 doco，不需要包含脚本标签 - 它将通过 requirejs 加载

Requirejs main.js 定义：

  require.config({
    paths:{
        'angular-ui-router': 'vendor/angular-ui-router/release/'
    },
    shim:{
       'angular': {
          exports: 'angular'
     }
   }
  });

应用布局：

  -- root
     index.html
     main.js
     -- js
         -- app (angular files here)
            app.js
     -- vendor (3rd party libs)

requirejs main.js 设置 index.html

  <script data-main="main.js" src="vendor/requirejs/require.js"></script>

Answer 1

您使用的指南不是为 RequireJS 制作的。在那里应用说明后，您正在做这样的事情：

<script>
  var myApp = angular.module('myApp', [require('angular-ui-router')]);
</script>

这通常无法与 RequireJS 一起使用，因为使用单个字符串调用 require 会失败 除非模块已经加载 。此调用只有在 define 内才能保证有效，如下所示：

define(function (require) {
  var myApp = angular.module('myApp', [require('angular-ui-router')]);
});

此代码是一个模块，应位于单独的 .js 文件中并使用 require(['module name']) 加载。（请注意，该参数是一个字符串数组。这是 require 的一种不同于采用单个字符串参数的形式。）

您应该使用 Component，这是您正在使用的指南的作者在 he/she 编写指南时使用的工具，或者与其等效的工具。否则，您需要转换您的代码以使用 RequireJS。

requirejs 和 angularjs 1.5 组件注入 ui.router 失败

requirejs and angularjs 1.5 injection of ui.router failing for components

components

requirejs

angularjs

angular-ui-router