模块'ui.bootstrap'不可用 - Angularjs

I am facing a strange problem with my angularjs project.

我的angularjs项目面临一个奇怪的问题。

I have a website like - www.server.com/pwm (home page). In the page there is an anchor tag with takes me to another page - www.server.com/publishers. When I load the home page and navigate to the publishers page by clicking the anchor tag, everything works fine. But when I directly type the url in the browser I get the below exceptions (eg. If I load the home page www.server.com/pwm and then type "/publishers" at the end of the url)

我有一个网站 - www.server.com/pwm（主页）。在页面中有一个锚标记带我到另一个页面 - www.server.com/publishers。当我加载主页并通过单击锚标签导航到发布者页面时，一切正常。但是当我直接在浏览器中输入网址时，我得到以下例外（例如，如果我加载主页www.server.com/pwm，然后在网址末尾输入“/ publishers”）

[$injector:nomod] Module 'ui.bootstrap' 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. http://errors.angularjs.org/1.2.18/$injector/nomod?p0=ui.bootstrap"

[$ injector：nomod]模块'ui.bootstrap'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。 http://errors.angularjs.org/1.2.18/$injector/nomod?p0=ui.bootstrap”

The confusing part is that I have included the necessary libraries and it works fine when I navigate through the webpage. The problem occurs when I try to directly navigate to a child page. I am making use to ngRoute and templates to load the page

令人困惑的部分是我已经包含了必要的库，当我浏览网页时它工作正常。当我尝试直接导航到子页面时，会发生此问题。我正在使用ngRoute和模板来加载页面

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

and my script files

和我的脚本文件

<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>

3 个解决方案

#1

All of your script tags are using absolute paths (they start with a /) except for the angular-bootstrap tags; they use relative paths. That means they are relative to wherever you are in the browser.

除了angular-bootstrap标记之外，所有脚本标记都使用绝对路径（它们以/开头）;他们使用相对路径。这意味着它们与您在浏览器中的任何位置相关。

Your javascript files are all located at www.website.com/Scripts/... because all of your script tags except those two use absolute paths, they will always look for the script in the same place. However, the two angulcar-bootstrap paths will look in different place depending on where you are in the browser.

您的javascript文件都位于www.website.com/Scripts / ...因为除了这两个脚本标记之外的所有脚本标记都使用绝对路径，它们将始终在同一位置查找脚本。但是，根据您在浏览器中的位置，两个angulcar-bootstrap路径将在不同的位置查看。

The reason it works unless you go directly to the child page is because angular only loads javascript files on the initial page load and not on navigation.

除非你直接进入子页面，它的工作原因是因为angular只会在初始页面加载时加载javascript文件，而不是导航。

So simply change your angular-bootstrap script tags to use absolute paths like the rest of your script tags.

因此，只需更改angular-bootstrap脚本标记即可使用绝对路径，例如其他脚本标记。

#2

I also had same problem and I resolved it. Detail is below.

我也有同样的问题，我解决了。细节如下。

Check your {{project_root}}/test/karma.conf.js

检查你的{{project_root}} / test / karma.conf.js

And be sure to bower_components/angular-bootstrap/ui-bootstrap-tpls.js in it. In your case, you should put Scripts/angular-ui/ui-bootstrap-tpls.min.js in it.

并且一定要在其中使用bower_components / angular-bootstrap / ui-bootstrap-tpls.js。在你的情况下，你应该在其中放置Scripts / angular-ui / ui-bootstrap-tpls.min.js。

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'
],

#3

I guess, it has nothing do with ui-bootstrap. This issue is related to angular routing. Please try this server.com/#/publishers (When writing location at address-bar manually).

我猜，它与ui-bootstrap没什么关系。此问题与角度路由有关。请尝试此server.com/#/publishers（手动在地址栏中写入位置时）。