错误:[$ injector:modulerr]由于以下原因而无法实例化模块rt.select2:模块'rt.select2'不可用

时间:2019-01-14 10:27:56

标签: javascript angularjs angularjs-select2

我正在一个项目中使用Angular.JS作为前端,并使用Node.JS作为后端。
当我需要多选时,我开始阅读有关select2的内容,并决定尝试一下:所以我在CLI上输入

bower install --save angular-select2


C:\GestionalePR> bower install --save angular-select2
bower angular-select2#*     not-cached https://github.com/rubenv/angular-select2.git#*
bower angular-select2#*        resolve https://github.com/rubenv/angular-select2.git#*
bower angular-select2#*       download https://github.com/rubenv/angular-select2/archive/v1.5.3.tar.gz
bower angular-select2#*        extract archive.tar.gz
bower angular-select2#*       resolved https://github.com/rubenv/angular-select2.git#1.5.3
bower select2#~3.5.2        not-cached https://github.com/ivaynberg/select2.git#~3.5.2
bower select2#~3.5.2           resolve https://github.com/ivaynberg/select2.git#~3.5.2
bower select2#~3.5.2          download https://github.com/ivaynberg/select2/archive/3.5.4.tar.gz
bower select2#~3.5.2           extract archive.tar.gz
bower select2#~3.5.2      invalid-meta for:C:\Users\NDDA4~1.LUK\AppData\Local\Temp\NS12-n.lukic\bower\35368a19f307e4af02d0df055846840d-10824-prTCzV\bower.json
bower select2#~3.5.2      invalid-meta The "main" field cannot contain font, image, audio, or video files
bower select2#~3.5.2      invalid-meta The "main" field cannot contain font, image, audio, or video files
bower select2#~3.5.2      invalid-meta The "main" field cannot contain font, image, audio, or video files
bower select2#~3.5.2      invalid-meta The "main" field has to contain only 1 file per filetype; found multiple .png files: ["select2.png","select2x2.png"]
bower select2#~3.5.2          resolved https://github.com/ivaynberg/select2.git#3.5.4
bower angular-select2#^1.5.3   install angular-select2#1.5.3
bower select2#~3.5.2           install select2#3.5.4

angular-select2#1.5.3 app\bower_components\angular-select2
├── angular#1.6.10
└── select2#3.5.4

select2#3.5.4 app\bower_components\select2
└── jquery#3.3.1

所以,一切看起来都不错。
然后,我继续遵循Select2的GitHub页面上的小型安装教程,并像这样修改了我的app.js和index.html

App.js

define(['moment'], function (moment) {

    window.moment = moment;

    var app = angular.module('app', ['ui.router', 'ngMaterial', 'ui.grid', 'ui.grid.pagination',
        'ui.grid.autoResize', 'uiGmapgoogle-maps', 'rt.select2']);


    app.config(['$locationProvider', '$controllerProvider',
        '$compileProvider', '$filterProvider', '$provide', '$qProvider',
        function ($locationProvider, $controllerProvider, $compileProvider, $filterProvider,
            $provide, $qProvider) {

            app.controller = $controllerProvider.register;
            app.directive = $compileProvider.directive;
            app.filter = $filterProvider.register;
            app.factory = $provide.factory;
            app.service = $provide.service;

            $locationProvider.html5Mode(false);

        }
    ]);

    app.component('header', {
        templateUrl: './header.html',
        controller: function ($scope, $window) {
            $scope.email = JSON.parse($window.sessionStorage.getItem('session')).currentUser.email;
            $scope.userId = JSON.parse($window.sessionStorage.getItem('session')).currentUser._id;
        }
    });

    // app.config(['$qProvider', function ($qProvider) {
    //     $qProvider.errorOnUnhandledRejections(false);
    // }]);

    app.filter('boolean', function () {
        return function (input) {
            return input ? "Sì" : "No";
        }
    });

    app.filter('date', function () {
        return function (input) {
            var formatted = moment(input).format('YYYY-MM-DD');
            return formatted;
        }
    });

    app.filter('datetime', function () {
        return function (input) {
            var formatted = moment(input).format('DD-MM-YYYY hh:mm a');
            return formatted;
        }
    });

    app.constant('CONF', CONFIG);

    return app;


});

Index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- styles -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.min.css" />
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" />
    <link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.min.css" />
    <link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"
    />


    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <script src='//maps.googleapis.com/maps/api/js?key=AIzaSyA8dclXUX9yNGbFY7vXeHInm5gVGSuTdIw&libraries=places'></script>
    <link rel="stylesheet" href="css/main.css" />

    <title>Testing Page</title>
</head>

<body>

    <!-- Main Content Container -->
    <div id="main" ui-view></div>
    <script src="bower_components/angular-select2/dist/angular-select2.min.js"></script>

    <script type="text/javascript" src="bower_components/requirejs/require.js" data-main="bootstrap.js"></script>
</body>

</html>

添加的所有内容如本教程所述。好。因此,一切都应该很酷并且可以正常工作。
这里有个问题:应用程序甚至不会渲染主页(Select2不在其中)并抛出此错误

angular.js:125 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module rt.select2 due to:
Error: [$injector:nomod] Module 'rt.select2' 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.


https://errors.angularjs.org/1.6.10/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20rt.select2%20due%20to%3A%0AError%3A%20%5B%24injector%3Anomod%5D%20Module%20'rt.select2'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0A%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.6.10%2F%24injector%2Fmodulerr%3Fp0%3Drt.select2%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520Module%2520'rt.select2'%2520is%2520not%2520available!%2520You%2520either%2520misspelled%2520the%2520module%2520name%2520or%2520forgot%2520to%2520load%2520it.%2520If%2520registering%2520a%2520module%2520ensure%2520that%2520you%2520specify%2520the%2520dependencies%2520as%2520the%2520second%2520argument.%250Ahttps%253A%252F%252Ferrors.angularjs.org%252F1.6.10%252F%2524injector%252Fnomod%253Fp0%253Drt.select2%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8010%252Fbower_components%252Fangular%252Fangular.js%253A125%253A12%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8010%252Fbower_components%252Fangular%252Fangular.js%253A2313%253A17%250A%2520%2520%2520%2520at%2520ensure%2520(http%253A%252F%252Flocalhost%253A8010%252Fbower_components%252Fangular%252Fangular.js%253A2234%253A38)%250A%2520%2520%2520%2520at%2520module%2520(http%253A%252F%252Flocalhost%253A8010%252Fbower_components%252Fangular%252Fangular.js%253A2311%253A14)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8010%252Fbower_components%252Fangular%252Fangular.js%253A5010%253A22%250A%2520%2520%2520%2520at%2520forEach%2520(http%253A%252F%252Flocalhost%253A8010%252Fbower_components%252Fangular%252Fangular.js%253A418%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(http%253A%252F%252Flocalhost%253A8010%252Fbower_components%252Fangular%252Fangular.js%253A4994%253A5)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8010%252Fbower_components%252Fangular%252Fangular.js%253A5012%253A40%250A%2520%2520%2520%2520at%2520forEach%2520(http%253A%252F%252Flocalhost%253A8010%252Fbower_components%252Fangular%252Fangular.js%253A418%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(http%253A%252F%252Flocalhost%253A8010%252Fbower_components%252Fangular%252Fangular.js%253A4994%253A5)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8010%2Fbower_components%2Fangular%2Fangular.js%3A125%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8010%2Fbower_components%2Fangular%2Fangular.js%3A5034%3A15%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8010%2Fbower_components%2Fangular%2Fangular.js%3A418%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8010%2Fbower_components%2Fangular%2Fangular.js%3A4994%3A5)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8010%2Fbower_components%2Fangular%2Fangular.js%3A5012%3A40%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8010%2Fbower_components%2Fangular%2Fangular.js%3A418%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8010%2Fbower_components%2Fangular%2Fangular.js%3A4994%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A8010%2Fbower_components%2Fangular%2Fangular.js%3A4911%3A19)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8010%2Fbower_components%2Fangular%2Fangular.js%3A1965%3A20)%0A%20%20%20%20at%20Object.bootstrap%20(http%3A%2F%2Flocalhost%3A8010%2Fbower_components%2Fangular%2Fangular.js%3A1986%3A12)
    at angular.js:125
    at angular.js:5034
    at forEach (angular.js:418)
    at loadModules (angular.js:4994)
    at createInjector (angular.js:4911)
    at doBootstrap (angular.js:1965)
    at Object.bootstrap (angular.js:1986)
    at bootstrap.js:71
    at Object.execCb (require.js:1696)
    at Module.check (require.js:883)

我缺少什么或做错了什么?我已经按照教程中的说明进行了所有操作(该操作不会与任何常规Angular的插件安装分离),并且我收到此错误...十分确定,我也尝试过:

  • 从index.html中删除Select2,然后将其添加到实际使用的位置,但是没有用;
  • 在代码中包含2个Select2:一个在index.html中,另一个在实际使用它的页面中,但这并不起作用

0 个答案:

没有答案