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

Posted 2023-02-23

【中文标题】requirejs 和 angularjs 1.5 注入 ui.router 组件失败

【英文标题】：requirejs and angularjs 1.5 injection of ui.router failing for components

【发布时间】：2016-11-09 21:59:04

【问题描述】：

使用推荐的组件加载方法时出现此错误 (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>

根据文档，不需要包含脚本标签 - 它将通过 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)

需要 index.html 中的 main.js 设置

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

【参考方案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，这是您正在使用的指南的作者在他/她编写指南时使用的，或与之等效的工具。否则，您需要将代码转换为使用 RequireJS。

【讨论】：

哦，哇，我错过了很多细节 - 谢谢路易斯。然后我会以正常方式加载 ui-router。我认为组件是指 angularjs :-/