我正在一个项目中使用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的插件安装分离),并且我收到此错误...十分确定,我也尝试过: