web-dev-qa-db-ja.com

エラー：[$ injector：nomod]モジュール 'ui.bootstrap'は利用できません！スペルを間違えたか[...]

ここでこの問題が発生しており、これまでのところ一貫した解決策がありません。 JavaプロジェクトをAngularでフロントエンドで実行していて、ui-bootstrapを使用してオートコンプリート機能を実装しようとしていますが、常にこのエラーが発生します。

Uncaught Error: [$injector:modulerr] Failed to instantiate module textChangrApp 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. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.3.0-rc.4/$injector/nomod?p0=ui.bootstrap
    at http://localhost:8080/bower_components/angular/angular.js:80:12
    at http://localhost:8080/bower_components/angular/angular.js:1787:17
    at ensure (http://localhost:8080/bower_components/angular/angular.js:1711:38)
    at module (http://localhost:8080/bower_components/angular/angular.js:1785:14)
    at http://localhost:8080/bower_components/angular/angular.js:4024:22
    at forEach (http://localhost:8080/bower_components/angular/angular.js:330:20)
    at loadModules (http://localhost:8080/bower_components/angular/angular.js:4008:5)
    at http://localhost:8080/bower_components/angular/angular.js:4025:40
    at forEach (http://localhost:8080/bower_components/angular/angular.js:330:20)
    at loadModules (http://localhost:8080/bower_components/angular/angular.js:4008:5) http://errors.angularjs.org/1.3.0-rc.4/$injector/modulerr?p0=ui.bootstrap&p…2F%2Flocalhost%3A8080%2Fbower_components%2Fangular%2Fangular.js%3A4008%3A5)
    at http://localhost:8080/bower_components/angular/angular.js:80:12
    at http://localhost:8080/bower_components/angular/angular.js:4047:15
    at forEach (http://localhost:8080/bower_components/angular/angular.js:330:20)
    at loadModules (http://localhost:8080/bower_components/angular/angular.js:4008:5)
    at http://localhost:8080/bower_components/angular/angular.js:4025:40
    at forEach (http://localhost:8080/bower_components/angular/angular.js:330:20)
    at loadModules (http://localhost:8080/bower_components/angular/angular.js:4008:5)
    at createInjector (http://localhost:8080/bower_components/angular/angular.js:3948:11)
    at doBootstrap (http://localhost:8080/bower_components/angular/angular.js:1480:20)
    at bootstrap (http://localhost:8080/bower_components/angular/angular.js:1501:12) http://errors.angularjs.org/1.3.0-rc.4/$injector/modulerr?p0=textChangrApp&…F%2Flocalhost%3A8080%2Fbower_components%2Fangular%2Fangular.js%3A1501%3A12) angular.js:80(anonymous function) angular.js:80(anonymous function) angular.js:4047forEach angular.js:330loadModules angular.js:4008createInjector angular.js:3948doBootstrap angular.js:1480bootstrap angular.js:1501angularInit angular.js:1395(anonymous function) angular.js:24904trigger angular.js:2715eventHandler angular.js:2986



//index.html
    <head>
        <!-- ... -->
        <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
        <script src="../bower_components/angular/angular.js"></script>
        <script src="../bower_components/angular-aria/angular-aria.js"></script>
        <script src="../bower_components/angular-animate/angular-animate.js"></script>
        <script src="../bower_components/hammerjs/hammer.js"></script>
        <script src="../bower_components/angular-material/angular-material.js"></script>
    </head>
//app.js
    angular
      .module( 'textChangrApp', [ 'ngAnimate', 'ngMaterial','directive.g+signin', 'ui.bootstrap'])

<head>インポート時、これまでは問題なく動作していたため、クラッシュしました。これについて少し教えていただければ幸いです。

ありがとうございました。

angularjsangular-ui-bootstrapbower
10
bobleujr

Ui.bootstrapモジュールafter angularjsファイルをロードする必要があります。

22
Dima Grossman

これをバウアー経由でインストールする別の方法とここに手順があります。

次の2つのパッケージを、ディレクトリのbower.jsonに追加します。

"bootstrap": "*",
"angular-bootstrap": "*",

enter image description here

ディレクトリからbower updateを実行します

以下のようにui.bootstrapをangularモジュールに追加します。

enter image description here

ブートストラップが機能するようにビューに配線します

CSS

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

JS

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
5
Gajen Sunthara

Angular.min ....の後に以下を含める必要があります。

<script src="..//ui-bootstrap-custom-tpls-0.12.0.min.js" type="text/javascript"></script>
2
Chandan Kumar D N