无法为Angular实例化模块ui-bootstrap [英] Failed to instantiate module ui-bootstrap for Angular

查看:44
本文介绍了无法为Angular实例化模块ui-bootstrap的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在将angular-bootstrap加载到我的应用程序时遇到问题

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. 

我的模块中具有ui-bootstrap依赖性,并且导入了库但我仍然遇到问题.我一直在看类似的文章并玩弄它,但是我似乎无法摆脱控制台错误.有什么建议吗?

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

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>

推荐答案

首先,您必须安装带有Bower的 angular-bootstrap :

At first, you have to install the angular-bootstrap with bower:

bower install angular-bootstrap

您还有一个错字,它是 ui.bootstrap ,而不是 ui-bootstrap .

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

将您的模块更改为:

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

这篇关于无法为Angular实例化模块ui-bootstrap的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆