Modul 'ui.bootstrap' ist nicht verfügbar - Angularjs

Question

Ich habe ein seltsames Problem mit meinem angularjs-Projekt.

Ich habe eine Website wie - www.server.com/pwm (Homepage). Auf der Seite gibt es ein Anker-Tag mit dem ich auf eine andere Seite - www.server.com/publishers - gehe. Wenn ich die Startseite lade und durch Klicken auf das Anchor-Tag zur Publisher-Seite navigiere, funktioniert alles einwandfrei. Aber wenn ich die URL direkt in den Browser eintippe bekomme ich folgende Ausnahmen (zB. Wenn ich die Homepage www.server.com/pwm lade und dann am Ende der URL "/ publishers" eintippe)

[ $ injector: nomod] Modul 'ui.bootstrap' ist nicht verfügbar! Sie haben entweder den Modulnamen falsch geschrieben oder vergessen, ihn zu laden. Wenn Sie ein Modul registrieren, stellen Sie sicher, dass Sie die Abhängigkeiten als zweites Argument angeben. http://errors.angularjs.org/1.2.18/ $ Injektor/nomod? P0 = ui.bootstrap“

Das verwirrende Teil ist, dass ich die notwendigen Bibliotheken enthalten sind, und es funktioniert gut, wenn ich durch die Webseite navigieren. Das Problem tritt auf, wenn ich versuche, direkt auf ein navigieren Kind Seite. ich bin der Seite

var pubsApp = angular.module('pubsApp', ['ngResource', 'ngRoute', 'ui.bootstrap']) 

und mein Skript-Dateien

<script src="/Scripts/jquery-1.9.1.js" type="text/javascript"></script> 
<script src="/Scripts/angular.js" type="text/javascript"></script> 
<script src="/Scripts/angular-route.js" type="text/javascript"></script> 
<script src="/Scripts/angular-sanitize.js" type="text/javascript"></script> 
<script src="/Scripts/angular-resource.js" type="text/javascript"></script> 
<script src="/Scripts/bootstrap.js" type="text/javascript"></script> 
<script src="Scripts/angular-ui/ui-bootstrap.min.js" type="text/javascript"></script> 
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js" type="text/javascript"></script> 
<script src="/js/app.js" type="text/javascript"></script> 

Answer 1

Alle Ihre Skript-Tags verwenden absolute Pfade (sie beginnen mit einem /) mit Ausnahme der Angular-Bootstrap-Tags; Sie verwenden relative Pfade. Das bedeutet, dass sie relativ zu dem Ort sind, an dem Sie sich im Browser befinden.

Ihre Javascript-Dateien befinden sich alle unter www.website.com/Scripts/..., da alle Ihre Skript-Tags mit Ausnahme dieser beiden absolute Pfade verwenden, werden sie immer suchen das Skript an der gleichen Stelle. Die beiden angulcar-bootstrap-Pfade werden jedoch an anderer Stelle angezeigt, je nachdem, wo Sie sich im Browser befinden.

Der Grund, es funktioniert, wenn Sie gehen direkt auf die untergeordnete Seite ist, weil eckig nur lädt JavaScript-Dateien auf der ersten Seite laden und nicht auf die Navigation.

Ändern Sie einfach Ihre Angular-Bootstrap-Skript-Tags, um absolute Pfade wie den Rest Ihrer Skript-Tags zu verwenden.

Answer 2

ich denke, laden Verwendung ngRoute und Vorlagen machen es nichts zu tun mit ui-Bootstrap hat. Dieses Problem wird im Zusammenhang mit Winkelführung Bitte versuchen Sie es mit server.com/#/publishers (wenn Sie den Standort manuell in die Adressleiste schreiben).

Answer 3

Ich hatte auch das gleiche Problem und ich habe es gelöst. Detail ist unten.

Überprüfen Sie Ihre {{project_root}}/test/karma.conf.js

Und achten Sie darauf, bower_components/Winkel Bootstrap/ui-Bootstrap-tpls.js drin. In Ihrem Fall sollten Sie Skripte/angular-ui/ui-bootstrap-tpls.min.js darin einfügen.

files: [ 
    'bower_components/angular/angular.js', 
    'bower_components/angular-mocks/angular-mocks.js', 
    'bower_components/angular-animate/angular-animate.js', 
    'bower_components/angular-cookies/angular-cookies.js', 
    'bower_components/angular-resource/angular-resource.js', 
    'bower_components/angular-route/angular-route.js', 
    'bower_components/angular-sanitize/angular-sanitize.js', 
    'bower_components/angular-touch/angular-touch.js', 
    'bower_components/angular-bootstrap/ui-bootstrap-tpls.js', 
    'app/scripts/**/*.js', 
    'test/mock/**/*.js', 
    'test/spec/**/*.js' 
],