Failed to instantiate module ui-bootstrap for angularjs

Datetime:2016-08-22 22:19:24          Topic: Bootstrap  AngularJS           Share

I'm having issues getting angular-bootstrap to load in my app

[$injector:modulerr] Failed to instantiate module RecipeSite due to:

Error: [$injector:modulerr] Failed to instantiate module ui-bootstrap due to:

Error: [$injector:nomod] Module 'ui-bootstrap' is not available! You either misspelled the module name or forgot to load it.

there is ui-bootstrap dependency in my module and I imported the library

but I'm still having the issue. I've been looking at posts similar to this and playing with it, but I can't seem to get the console error to go away.

Any suggestions?

app.js

var app = angular.module('RecipeSite', ['ngRoute', 'ngAnimate', 'ui-bootstrap']);

index.html

<!DOCTYPE html>

<html ng-app="RecipeSite">

<head>

<title>Directives Practice</title>

<script src="bower_components/angular/angular.js"></script>

<script src="bower_components/angular-route/angular-route.js"></script>

<script src="bower_components/angular-animate/angular-animate.js"></script>

<script src="bower_components/jquery/dist/jquery.js"></script>

<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="app.css">

<script src="app.js"></script>

</head>

<body>

<div class="container">

<div id="header">

<div class="row">

<div class="col-md-offset-3 col-md-6">

{{"Test Site"}}

</div>

</div> <!–end row–>

<hr class="hrstyle">

</div> <!–end header–>

</div> <!–end container–>

<div class="container">

<div class="row">

</div>

</div>

</body>

</html>

Solution :

You have a typo, it's ui.bootstrap, not ui-bootstrap.

Change the module to:

var app = angular.module('RecipeSite', ['ngRoute', 'ngAnimate', 'ui.bootstrap']);





About List