ui-select mit Fehler beim Laden "Das Modul 'ui.select' ist nicht verfügbar! Sie haben entweder den Modulnamen falsch geschrieben oder vergessen, ihn zu laden."

Question

Ich habe versucht, die ui-select-Direktive in meiner Lösung zu verwenden. Ich habe den ganzen Github-Ordner über ui-select in meiner Lösung hinzugefügt. Ich injiziere auch das 'ui.select' in meiner app.js. Aber wenn ich die Lösung ausführen, wird der folgende Fehler in der F12 gezeigt:

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. 

Answer 1

Versuchen injiziert, mit CDN statt einschließlich der Dateien direkt.

für CSS: [https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.17.1/select.css]

für js: [https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.17.1/select.js] schließen die über Tags in Ihrer Haupt-Seite index.html, Sie keine Notwendigkeit, die Dateien und schließen, um sie herunterzuladen, CDN die Dateien zur Verfügung stellt.

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> 

In app.js:

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

Anforderungen an ui.select:

• Angular> = 1.2.18
• ngSanitize Modul
• jQuery (optional für ältere Browser-Unterstützung)
• Browserkompatibilität ab Internet Explorer 8 und Firefox 3.6.
• Bootstrap/Select2/Selectize CSS entsprechend

Answer 2

Fügen Sie die heruntergeladene Datei Pfad Script-Tags in Ihrer Haupt-Datei index.html richtig mit und stellen Sie sicher, dass Sie die Abhängigkeit richtig wie folgt injiziert in Ihrer app.js Datei:

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

(oder)

Andere Art und Weise Paket-Manager zu verwenden ist:

Sie npm oder bower können installiert

npm ui-select

Bower installieren Winkel-ui-select

und stellen Sie sicher, installieren Sie, dass Sie die Abhängigkeit richtig

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

Answer 3

Überprüfen Sie Ihre Bower-Datei.

Wenn AngularJS-ui: Wählen Sie diese Zeile in bower.json Datei nicht ab Lager in

"Winkel-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" 
    } 
}