ui-select 加载错误“模块 'ui.select' 不可用！您拼错了模块名称或忘记加载它。”答案

【问题标题】：ui-select with error loading "Module 'ui.select' is not available! You either misspelled the module name or forgot to load it."ui-select 加载错误“模块 'ui.select' 不可用！您拼错了模块名称或忘记加载它。”
【发布时间】：2016-09-27 07:16:03
【问题描述】：

我尝试在我的解决方案中使用 ui-select 指令。我在我的解决方案中添加了关于 ui-select 的整个 Github 文件夹。我还在我的 app.js 中注入了“ui.select”。但是当我运行解决方案时，F12中显示以下错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module MetronicApp due to:
Error: [$injector:modulerr] Failed to instantiate module oc.lazyLoad due to:
Error: [$injector:nomod] Module 'ui.select' 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.

【问题讨论】：

可能你在 angularjs 文件之前包含了它。检查一下。

标签： angularjs inject

【解决方案1】：

尝试使用CDN，而不是直接包含文件。

对于 css：[https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.17.1/select.css]

对于 js :[https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.17.1/select.js] 在您的主 index.html 页面中包含 about 标签，您无需下载文件并包含它们，CDN 将提供文件。

HTML：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.17.1/select.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.17.1/select.js" async></script>

在 app.js 中：

angular.module('myapp', ['ui.select', 'ngSanitize']);

ui.select 的要求：

角度 >=1.2.18
ngSanitize 模块
jQuery（旧版浏览器支持可选）
从 Internet Explorer 8 和 Firefox 3.6 开始的浏览器兼容性。
Bootstrap/Select2/Selectize CSS as appropriate

【讨论】：

这更多的是一种变通方法，而不是一个正确的解决方案，它只是解决了正确注入文件显然是错误的问题。有太多的 Angular 解决方案涉及“使用 CDN”作为解决方案，无缘无故地增加了应用程序所需的请求数量。
如何使用 webpack 模块？

【解决方案2】：

在您的主 index.html 文件中使用脚本标签正确包含下载的文件路径，并确保您在 app.js 文件中正确注入了依赖项：

angular.module('myModule', ['ui.select']);

（或）

其他方法是使用包管理器：

您可以使用 npm 或 bower 安装

npm install ui-select

凉亭安装 angular-ui-select

并确保您正确注入了依赖项

angular.module('myModule', ['ui.select']);

【讨论】：

你提到的两种方法我都做了，但还是一样的错误

【解决方案3】：

检查您的凉亭文件。

如果 angularjs-ui-select 不可用，请将此行添加到您的 bower.json 文件中

"angular-ui-select": "~0.18.1"

"version": "0.0.0",
  "dependencies": {
    "angular-animate": "~1.5.3",
    "angular-cookies": "~1.5.3",
    "angular-touch": "~1.5.3",
    "angular-sanitize": "~1.5.3",
    "angular-messages": "~1.5.3",
    "angular-aria": "~1.5.3",
    "jquery": "~2.1.4",
    "angular-resource": "~1.5.3",
    "angular-route": "~1.5.3",
    "bootstrap-sass": "~3.3.5",
    "angular-bootstrap": "~0.14.3",
    "malarkey": "yuanqing/malarkey#~1.3.1",
    "angular-toastr": "~1.5.0",
    "moment": "~2.10.6",
    "animate.css": "~3.4.0",
    "angular": "~1.5.3",
    "angular-daterangepicker": "^0.2.2",
    "angular-ui-select": "~0.18.1"
  },
  "devDependencies": {
    "angular-mocks": "~1.5.3"
  },
  "overrides": {
    "bootstrap-sass": {
      "main": [
        "assets/stylesheets/_bootstrap.scss",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    }
  },
  "resolutions": {
    "jquery": "~2.1.4",
    "angular": "~1.5.3"
  }
}

【讨论】：