Angular JS - Ui-select js 文件未加载
Angular JS - Ui-select js file not loading
自从我陷入这个问题已经一天了。我已经通过 bower 安装了 ui-select 并且安装成功。 css 文件加载正确，但 javascript 文件未在网络调用中加载，但我可以在查看页面源代码中清楚地看到该文件。
这就是我收到此错误的原因。
Failed to instantiate module BlurAdmin due to:
Error: [$injector:modulerr] Failed to instantiate module ui.select 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.
这是我的app.js
'use strict';//NOSONAR
(function () {
angular.module('BlurAdmin', [
'LocalStorageModule',
'ngAnimate',
'rzModule',
'angular-confirm',
'ngSegment',
'ngFileUpload',
'multipleDatePickerAdvanced',
'multipleDatePicker',
'ui.bootstrap',
'ui.sortable',
'ui.router',
'ui.select',
'infinite-scroll',
'ngSanitize',
'toastr',
'smart-table',
"xeditable",
'ui.slimscroll',
'ngJsTree',
'angular-progress-button-styles',
'jsonFormatter',
'angularPromiseButtons',
'btford.socket-io',
'ngMaterial',
'BlurAdmin.filters',
'BlurAdmin.directives',
'BlurAdmin.theme',
'BlurAdmin.pages',
]).config(routeConfig);
/** @ngInject */
function routeConfig($urlRouterProvider) {
$urlRouterProvider.otherwise('/admin');
}
})();
(function () {
//Setting HTML5 Location Mode
angular.module('BlurAdmin.pages').config(['$locationProvider', locationProvider]);
function locationProvider($locationProvider) {
$locationProvider.html5Mode({
enabled: true
});
}
angular.module('BlurAdmin.pages').config(['$httpProvider',
function($httpProvider) {
// $httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
// delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
/*angular.module('BlurAdmin.pages').constant('configURL', {
appName: window.location.host,
appVersion: 2.0
});*/
})();
这是我的 bower.json
{
"name": "blur-admin",
"version": "1.2.0",
"homepage": "https://github.com/1itvinka/blur-admin",
"authors": [
"akveo"
],
"description": "Blur Admin HTML template",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"chart.js": "~2.4.0",
"Ionicons": "ionicons#~2.0.1",
"amcharts": "~3.15.2",
"amcharts-stock": "*",
"ammap": "~3.14.5",
"angular": "^1.6.6",
"angular-material": "^1.0.7",
"angular-aria": "1.5.0",
"angular-route": "~1.5.8",
"angular-slimscroll": "~1.1.5",
"angular-smart-table": "~2.1.3",
"angular-toastr": "~2.1.1",
"angular-touch": "~1.5.8",
"angular-ui-sortable": "~0.15.0",
"animate.css": "~3.5.2",
"bootstrap": "~3.3.5",
"bootstrap-select": "~1.12.1",
"bootstrap-switch": "~3.3.2",
"bootstrap-tagsinput": "~0.7.1",
"font-awesome": "fontawesome#~4.4.0",
"fullcalendar": "~3.0.1",
"highlight": "~8.8.0",
"angular-socket-io": "^0.7.0",
"jquery-ui": "~1.12.1",
"jquery.easing": "~1.3.1",
"jquery.easy-pie-chart": "~2.1.6",
"leaflet": "~0.7.5",
"moment": "~2.17.0",
"slimScroll": "jquery-slimscroll#~1.3.6",
"angular-progress-button-styles": "~0.1.0",
"angular-ui-router": "~0.3.2",
"angular-chart.js": "~1.0.3",
"angular-chartist.js": "~3.3.12",
"chartist": "0.9.5",
"angular-morris-chart": "~1.1.0",
"ionrangeslider": "2.1.4",
"angular-bootstrap": "~1.3.3",
"angular-animate": "~1.6.6",
"textAngular": "~1.4.6",
"angular-xeditable": "~0.5.0",
"ng-js-tree": "~0.0.7",
"ngSweetAlert": "angular-sweetalert#^1.1.0",
"json-formatter": "^0.6.0",
"angular-promise-buttons": "^0.1.17",
"angular-ui-scroll": "^1.6.1",
"crypto-js": "^3.1.6",
"angular-ui-select": "^0.19.8",
"ngInfiniteScroll": "^1.2.2",
"angular-local-storage": "^0.7.1",
"angular-segment-analytics": "^1.2.0",
"angularjs-slider": "^4.0.2",
"lightslider": "^1.1.5",
"angular-confirm-modal": "^1.2.3",
"ng-emoticons": "^2.1.0",
"ng-file-upload": "^12.0.4",
"he": "^1.1.0",
"MultipleDatePicker": "multiple-date-picker#^1.4.1"
},
"resolutions": {
"angular": "^1.6.6",
"jquery": "~2.1.4",
"angular-aria": "1.5.0",
"moment": "~2.10.2"
},
"overrides": {
"amcharts": {
"main": [
"./dist/amcharts/amcharts.js",
"./dist/amcharts/plugins/responsive/responsive.min.js",
"./dist/amcharts/serial.js",
"./dist/amcharts/funnel.js",
"./dist/amcharts/pie.js",
"./dist/amcharts/gantt.js"
]
},
"amcharts-stock": {
"main": "./dist/amcharts/amstock.js"
},
"ammap": {
"main": [
"./dist/ammap/ammap.js",
"./dist/ammap/maps/js/worldLow.js"
]
},
"bootstrap": {
"main": [
"dist/css/bootstrap.css",
"js/dropdown.js",
"./dist/fonts/**.*"
]
},
"slimScroll": {
"main": "./jquery.slimscroll.js"
},
"font-awesome": {
"main": [
"css/font-awesome.css",
"fonts/FontAwesome.otf",
"fonts/fontawesome-webfont.eot",
"fonts/fontawesome-webfont.svg",
"fonts/fontawesome-webfont.ttf",
"fonts/fontawesome-webfont.woff",
"fonts/fontawesome-webfont.woff2"
]
}
}
}
这是我的 foot.jade 我的所有文件都包含在其中。
if(process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging' || process.env.NODE_ENV === 'quality')
.
.
.
script(src='https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyATbh2hmRt6MN9bGC4PMAm9BDm7E4Lkj8A')
script(type='text/javascript', src='/dest/concat.min.js?v=' + process.env.querystring)
else
script(type='text/javascript', src='/bower_components/jquery/dist/jquery.js')
script(type='text/javascript', src='/bower_components/crypto-js/crypto-js.js')
script(type='text/javascript', src='/bower_components/angular-xeditable/dist/js/xeditable.js')
script(type='text/javascript', src='/bower_components/jstree/dist/jstree.js')
script(type='text/javascript', src='/bower_components/ng-js-tree/dist/ngJsTree.js')
script(type='text/javscript' , src='/bower_components/angular-ui-select/dist/select.js')
在你的 HTML 类型中应该是
类型='text/javascript'
不是类型='text/javscript'
自从我陷入这个问题已经一天了。我已经通过 bower 安装了 ui-select 并且安装成功。 css 文件加载正确，但 javascript 文件未在网络调用中加载，但我可以在查看页面源代码中清楚地看到该文件。
这就是我收到此错误的原因。
Failed to instantiate module BlurAdmin due to:
Error: [$injector:modulerr] Failed to instantiate module ui.select 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.
这是我的app.js
'use strict';//NOSONAR
(function () {
angular.module('BlurAdmin', [
'LocalStorageModule',
'ngAnimate',
'rzModule',
'angular-confirm',
'ngSegment',
'ngFileUpload',
'multipleDatePickerAdvanced',
'multipleDatePicker',
'ui.bootstrap',
'ui.sortable',
'ui.router',
'ui.select',
'infinite-scroll',
'ngSanitize',
'toastr',
'smart-table',
"xeditable",
'ui.slimscroll',
'ngJsTree',
'angular-progress-button-styles',
'jsonFormatter',
'angularPromiseButtons',
'btford.socket-io',
'ngMaterial',
'BlurAdmin.filters',
'BlurAdmin.directives',
'BlurAdmin.theme',
'BlurAdmin.pages',
]).config(routeConfig);
/** @ngInject */
function routeConfig($urlRouterProvider) {
$urlRouterProvider.otherwise('/admin');
}
})();
(function () {
//Setting HTML5 Location Mode
angular.module('BlurAdmin.pages').config(['$locationProvider', locationProvider]);
function locationProvider($locationProvider) {
$locationProvider.html5Mode({
enabled: true
});
}
angular.module('BlurAdmin.pages').config(['$httpProvider',
function($httpProvider) {
// $httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
// delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
/*angular.module('BlurAdmin.pages').constant('configURL', {
appName: window.location.host,
appVersion: 2.0
});*/
})();
这是我的 bower.json
{
"name": "blur-admin",
"version": "1.2.0",
"homepage": "https://github.com/1itvinka/blur-admin",
"authors": [
"akveo"
],
"description": "Blur Admin HTML template",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"chart.js": "~2.4.0",
"Ionicons": "ionicons#~2.0.1",
"amcharts": "~3.15.2",
"amcharts-stock": "*",
"ammap": "~3.14.5",
"angular": "^1.6.6",
"angular-material": "^1.0.7",
"angular-aria": "1.5.0",
"angular-route": "~1.5.8",
"angular-slimscroll": "~1.1.5",
"angular-smart-table": "~2.1.3",
"angular-toastr": "~2.1.1",
"angular-touch": "~1.5.8",
"angular-ui-sortable": "~0.15.0",
"animate.css": "~3.5.2",
"bootstrap": "~3.3.5",
"bootstrap-select": "~1.12.1",
"bootstrap-switch": "~3.3.2",
"bootstrap-tagsinput": "~0.7.1",
"font-awesome": "fontawesome#~4.4.0",
"fullcalendar": "~3.0.1",
"highlight": "~8.8.0",
"angular-socket-io": "^0.7.0",
"jquery-ui": "~1.12.1",
"jquery.easing": "~1.3.1",
"jquery.easy-pie-chart": "~2.1.6",
"leaflet": "~0.7.5",
"moment": "~2.17.0",
"slimScroll": "jquery-slimscroll#~1.3.6",
"angular-progress-button-styles": "~0.1.0",
"angular-ui-router": "~0.3.2",
"angular-chart.js": "~1.0.3",
"angular-chartist.js": "~3.3.12",
"chartist": "0.9.5",
"angular-morris-chart": "~1.1.0",
"ionrangeslider": "2.1.4",
"angular-bootstrap": "~1.3.3",
"angular-animate": "~1.6.6",
"textAngular": "~1.4.6",
"angular-xeditable": "~0.5.0",
"ng-js-tree": "~0.0.7",
"ngSweetAlert": "angular-sweetalert#^1.1.0",
"json-formatter": "^0.6.0",
"angular-promise-buttons": "^0.1.17",
"angular-ui-scroll": "^1.6.1",
"crypto-js": "^3.1.6",
"angular-ui-select": "^0.19.8",
"ngInfiniteScroll": "^1.2.2",
"angular-local-storage": "^0.7.1",
"angular-segment-analytics": "^1.2.0",
"angularjs-slider": "^4.0.2",
"lightslider": "^1.1.5",
"angular-confirm-modal": "^1.2.3",
"ng-emoticons": "^2.1.0",
"ng-file-upload": "^12.0.4",
"he": "^1.1.0",
"MultipleDatePicker": "multiple-date-picker#^1.4.1"
},
"resolutions": {
"angular": "^1.6.6",
"jquery": "~2.1.4",
"angular-aria": "1.5.0",
"moment": "~2.10.2"
},
"overrides": {
"amcharts": {
"main": [
"./dist/amcharts/amcharts.js",
"./dist/amcharts/plugins/responsive/responsive.min.js",
"./dist/amcharts/serial.js",
"./dist/amcharts/funnel.js",
"./dist/amcharts/pie.js",
"./dist/amcharts/gantt.js"
]
},
"amcharts-stock": {
"main": "./dist/amcharts/amstock.js"
},
"ammap": {
"main": [
"./dist/ammap/ammap.js",
"./dist/ammap/maps/js/worldLow.js"
]
},
"bootstrap": {
"main": [
"dist/css/bootstrap.css",
"js/dropdown.js",
"./dist/fonts/**.*"
]
},
"slimScroll": {
"main": "./jquery.slimscroll.js"
},
"font-awesome": {
"main": [
"css/font-awesome.css",
"fonts/FontAwesome.otf",
"fonts/fontawesome-webfont.eot",
"fonts/fontawesome-webfont.svg",
"fonts/fontawesome-webfont.ttf",
"fonts/fontawesome-webfont.woff",
"fonts/fontawesome-webfont.woff2"
]
}
}
}
这是我的 foot.jade 我的所有文件都包含在其中。
if(process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging' || process.env.NODE_ENV === 'quality')
.
.
.
script(src='https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyATbh2hmRt6MN9bGC4PMAm9BDm7E4Lkj8A')
script(type='text/javascript', src='/dest/concat.min.js?v=' + process.env.querystring)
else
script(type='text/javascript', src='/bower_components/jquery/dist/jquery.js')
script(type='text/javascript', src='/bower_components/crypto-js/crypto-js.js')
script(type='text/javascript', src='/bower_components/angular-xeditable/dist/js/xeditable.js')
script(type='text/javascript', src='/bower_components/jstree/dist/jstree.js')
script(type='text/javascript', src='/bower_components/ng-js-tree/dist/ngJsTree.js')
script(type='text/javscript' , src='/bower_components/angular-ui-select/dist/select.js')
在你的 HTML 类型中应该是 类型='text/javascript' 不是类型='text/javscript'