The 'ui.bootstrap' module is currently unavailable in AngularJS

Currently, I am encountering a peculiar issue with my angularjs project.

On my website - www.server.com/pwm (home page), there is an anchor tag that redirects me to another page - www.server.com/publishers. When I navigate from the home page to the publishers page by clicking the anchor tag, everything functions properly. However, when I directly enter the URL in the browser (e.g., loading www.server.com/pwm and then typing "/publishers" at the end of the URL), I encounter the following exceptions:

[$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"

The perplexing aspect is that all necessary libraries have been included, and everything works seamlessly when navigating through the webpage. The issue arises only when attempting to directly access a child page. I am using ngRoute and templates to load the page.

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

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

Answer №1

Your script tags have different paths specified: most use absolute paths starting with "/", but the angular-bootstrap tags use relative paths. This means they will look for the script in different places depending on your location in the browser.

All of your javascript files are located at www.website.com/Scripts/... because of the absolute paths used in most script tags, ensuring they always look in the same place. However, the two angular-bootstrap paths will vary based on your browser location.

The reason the scripts work unless you navigate directly to the child page is that Angular only loads javascript files on the initial page load and not during navigation.

To resolve this issue, update your angular-bootstrap script tags to use absolute paths like the rest of your script tags.

Answer №2

After encountering the same issue, I was able to find a solution.

Make sure to review the configuration file located at {{project_root}}/test/karma.conf.js

Ensure that bower_components/angular-bootstrap/ui-bootstrap-tpls.js is included in the file. If necessary, you may need to replace it with 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'
],

Answer №3

It seems that the problem is not caused by ui-bootstrap, but rather by angular routing. Have you tried accessing server.com/#/publishers directly in the address bar?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An unexpected error occurred in the Ember route processing: Assertion Failed in the listing

After working diligently to integrate an Emberjs front end (utilizing Ember Data) with my Flask API backend, I have encountered a puzzling issue. Despite the adapter functioning correctly - as evidenced by the API being called when accessing the 'List ...

Struggling with Mocha, supertest, and passport when testing authenticated routes with JWT authentication

I've been experimenting with testing authenticated routes in Mocha, but I've run into an issue where the user created in the `before` or `beforeEach` hooks doesn't persist. Here's a snippet from my test.js: const should = require(&apo ...

Legends for Jqplot Donut Chart disappearing after saving changes

I am currently working on creating a donut chart using jqplot which displays legends outside the grid. However, I have encountered an issue where when attempting to save the chart as a PNG image, the resulting image shows empty legends. var imgData = $(&a ...

Updating a component from a different source

As a newcomer to React, I'm curious about the ability to update one component's content based on events from another component. I have two React components set up. The first component loads data when the page initializes, while the second compon ...

What is the process for enabling HLS.js to retrieve data from the server side?

I have successfully implemented a video player using hls.js, and I have some ts files stored in https:/// along with an m3u8 file. To read the content of the m3u8 file, I used PHP to fetch it and sent the data to JavaScript (res["manifest"] = the content ...

Send a parameter to a React hook

I am facing an issue with a Component that is using a separate hook. I am unable to pass any value to that hook, which is necessary for my use case. const onEdit = (index: number) => useMediaLinkImage(img => { setNodeImages(imgData => { ...

Creating an angular application without relying on traditional HTML markup or directives

As I delved into an existing Angular project, I couldn't help but notice that the HTML files contained no trace of Angular code. <div id="chat"> <div data-id="6863" data-name="patrik.valkovic"></div> </div> Instead, only ...

What's the best way to animate the navigation on top of an image for movement?

I am currently in the process of creating my website as a graphic designer. My unique touch is having the navigation positioned on top of an image (which is animated via flash). This setup is featured prominently on my homepage, which is designed with mini ...

Using Jquery to show items in a nested loop

I have a requirement to showcase items owned by different customers. To achieve this, I utilize an ajax call to fetch the data and then group it based on individual customer identities. Subsequently, I append the grouped data to my HTML structure. The for ...

Implementing asynchronous validation in Angular 2

Recently started working with Angular 2 and encountered an issue while trying to validate an email address from the server This is the form structure I have implemented: this.userform = this._formbuilder.group({ email: ['', [Validators.requir ...

The command to trigger a click event on element 'a' is not functioning as expected

Can anyone assist me in triggering a click on this jQuery code? <a href="test.zip" id="mylink">test</a> <script> // this is not working $('#mylink').trigger('click'); </script> Your help is greatly app ...

Effects of incorporating unnecessary packages on Vue.js performance

In my Vue.js component, I have imported the module useI18n from "vue-i18n" but have not utilized it anywhere within the component. Concerned about how this could affect performance, particularly in terms of bundle size and load times. Will importing a mod ...

Why does one HTML link function while the other does not?

After creating links that connect two HTML files, I encountered an issue where one link does not work. The situation involves a folder named aiGame containing the aiindex.html file along with ai.js and ai.css. It is worth noting that the index.html file is ...

What is the method for detecting when the Enter key has been pressed in a field?

I often have several fields to fill out, with the user typically pressing 'enter' on one of the two main ones. I'd like to determine which field 'enter' was pressed on, but I'm not very familiar with JavaScript. Can anyone gui ...

Updating state based on input from a different component

I am attempting to modify the state of the page index in index.js from the Pagination component, Here is my index.js code: import useSWR from 'swr'; import { useState } from 'react'; const Index = ({ data }) => { const ini ...

Disappearing input field in DateTimePicker Bootstrap when blurred

Currently, I am utilizing the Bootstrap DateTimePicker plugin to enable users to select a specific date and time. The plugin functions well with one minor issue - whenever the user clicks outside or loses focus on the calendar box, both the box itself and ...

The child controller fails to inherit from the parent controller as expected

I've been struggling to grasp the concept of scope inheritance, especially when it comes to passing data objects from a parent controller to a child controller. Despite my efforts, I haven't been able to make it work. Can someone shed some light ...

obtaining the data stored in the backing bean and showcasing it upon submitting the form

I currently have an a4j:commandbutton implemented on my jsf page. Here is the code snippet- <a4j:commandButton id="submitBtn" value="#{msgsMass.MM_04_02_BTN_CONTINUE}" reRender="addNewCardForm,saveAddNewCardForm" immediate="true" action="#{bBea ...

Safeguard sub-pages with Passport Local if the user has not logged in

I attempted to follow a tutorial on local authentication with Passport and Express, but I am encountering difficulties in protecting my pages for users who are not logged in. My goal is to redirect them to the login page. I experimented with creating midd ...

Exploring how to retrieve the input value from an element with ReactJs

Is there a way to determine if an input field contains a value by referencing another element? Here is my approach: <div className='input-item'> <input ref="accessKey" name="username" className="lci-text" type="text"/> & ...