質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.23%

Angularでng-appを定義するとエラーになる

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,553

rontec

score 157

以前Angularで途中まで他の方が実装していたシステムがあり、諸事情のAngularを一度排除した後、再度一部だけAngularを使うことになりました。

私は何度かAngularの使用経験はあり、特に気負うことなく担当していたのですが、ng-appをHTML上に定義すると以下のエラーが発生し、解決に至ることが出来ませんでした。

Failed to instantiate module testApp due to:
Error: [$injector:nomod] Module 'testApp' 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.

https://docs.angularjs.org/api/ng/function/angular.module

javascript側で拾っているng-appの名前とスペルミスはありません。

以前Angularで実装されていた残りカスがあり、インスタンスを作る際それが邪魔している可能性も考慮しましたが、grepで単語検索までしたところ、他にng-appなどの定義をしている箇所はありませんでした。
※一部thymeleaf上に「ng-show」などの定義は残っていましたが。

現状ng-appを定義しているテンプレートは一箇所であり、またそれをJsでインスタンス化している箇所も一箇所のみです。
インジェクトする時の第二引数云々がヒントに書いてありますが、はじめてインスタンス化する今回に関係ない気がしています。

var app = angular.module('testApp', []);
app.controller('myController', ['$scope', function($scope) {
    ~
}]);


※こんな感じのコントローラーの定義箇所が一箇所という意味です。

かなり時間をかけて対応したのですが、結局解決することが出来ませんでした。
何か思い当たることがある方がいらしたら、ご教授願います。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • tkanda

    2016/01/22 00:08

    HTMLファイル側で ng-app="test" と記述してある部分と、ng-controller="myController" と記述してある部分を、それぞれ前後の脈絡が解るように示していただけると、答えが出やすいと思われますので、もし可能でしたら。

    キャンセル

  • rontec

    2016/01/22 00:11

    帰宅後、思い返しながら投稿させて頂いたので、不一致がございました。
    明日、正確なコードを記載させて頂きます。
    よろしければご確認頂ければ幸いです。

    キャンセル

  • rontec

    2016/01/22 09:02

    コードを修正させて頂きました。
    よろしければご確認ください。

    キャンセル

回答 1

check解決した方法

0

コーディングのあるあるではございますが、非常にバカバカしい失敗をしていました。
JSファイルの中でAngularのAppとControllerを受け取る部分を定義していたのですが、それが「$(function() {}」の内側に入っていました。
こんなつまらないことに3時間ぐらい頭悩ましたのかと自己嫌悪中です。

tkanda様、ご返答頂きありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる