AngularJS 1.2 $ หัวฉีด: modulerr

445

เมื่อใช้ angular 1.2 แทนที่จะเป็น 1.07 โค้ดต่อไปนี้ไม่ถูกต้องอีกต่อไปทำไม?

'use strict';

var app = angular.module('myapp', []);

app.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.
        when('/', {
            templateUrl: 'part.html',
            controller: 'MyCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });
    }
]);

ปัญหาอยู่ในส่วนกำหนดค่าหัวฉีด (app.config):

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=muninn&p1=Error%…eapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0rc1%2Fangular.min.js%3A31%3A252)

ถ้าฉันจำได้ถูกต้องปัญหานี้เริ่มต้นด้วย angular 1.1.6

javascript angularjs

— Shoen
แหล่งที่มา

636

ปัญหาเกิดจากการรวมโมดูล ngRoute ที่ขาดหายไป ตั้งแต่เวอร์ชั่น 1.1.6 เป็นส่วนแยก:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

var app = angular.module('myapp', ['ngRoute']);

— Shoen
แหล่งที่มา

492

หากคุณไม่แน่ใจว่าโมดูลจะหายไปใช้ angular.js ไม่ได้ลดขนาดลงซึ่งจะช่วยให้เกิดข้อผิดพลาดที่อ่านได้:

"Error: [$injector:nomod] Module 'ngRoute' 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."

— มาร์ท

2

อืมฉันใช้ bower และให้ไฟล์. map - ฉันสงสัยว่าทำไม Chrome ยังแสดงข้อผิดพลาดจากไฟล์ย่อ ขอขอบคุณที่หัวขึ้น @Mart!

— Aditya MP

5

@ arg20 คุณจะพบคำตอบได้ที่นี่: github.com/angular/angular.js/commit/…

— Laurent

4

วัวศักดิ์สิทธิ์ฉันกำลังมองหาวิธีแก้ปัญหานี้ทุกที่ ฉันอัพเกรดจาก 1.0 เป็น 1.2 และได้รับข้อผิดพลาดนี้ คำแนะนำเดียวที่ฉันหาได้คือทำให้แน่ใจว่า angular-route.js รวมอยู่ด้วยซึ่งมันเป็น .... ไม่ใช่แฟนของเอกสารเชิงมุม ยังไงก็ขอบคุณนะ! ฉันได้รับการโหวต

— RachelD

4

คุณอาจได้รับข้อผิดพลาดนี้หากคุณใช้ angular.module ('myModule') แทน angular.module ('myModule', []) ในขณะที่กำหนดโมดูลของคุณ stackoverflow.com/questions/16260538/…

— Anirudhan J

42

ข้อผิดพลาดของฉันหายไปโดยการเพิ่ม '()' นี้ในตอนท้าย

(function(){
    var home = angular.module('home',[]);

    home.controller('QuestionsController',function(){
        console.log("controller initialized");
        this.addPoll = function(){
            console.log("inside function");
        };
    });
})();

— ARP
แหล่งที่มา

40

อีกสิ่งหนึ่งที่จะเพิ่มในรายการเนื่องจากนี่คือผลลัพธ์แรกที่เกิดขึ้นกับการค้นหาโดย Google ของ 'ข้อผิดพลาด: [$ injector: modulerr] angular':

หากคุณมีความไม่ตรงกันระหว่างชื่อแอปของคุณใน 'index'html' และในนิยามแอปพลิเคชันจาวาสคริปต์หลักของคุณสิ่งนี้สามารถสร้างข้อผิดพลาดนี้ได้เช่นกัน

ตัวอย่างเช่นหาก HTML ของคุณมีลักษณะดังนี้:

    </head>
    <body ng-app="myWebSite">

        <!-- My Web Site -->
        <p>About my web site...</p>

        etc ...

และ JavaScript ของคุณมีลักษณะเช่นนี้ (เช่นมีการพิมพ์ชื่อแอพ - myWebCite แทน myWebSite):

/** Main AngularJS Web Application */ 
var app = angular.module('myWebCite', [ 'ngRoute' ]); 

/** Configure the Routes */ 
app.config(['$routeProvider', function ($routeProvider) { 
  etc ...

ดังนั้นข้อผิดพลาด 'ข้อผิดพลาด: [$ injector: modulerr] เชิงมุม' ก็จะถูกสร้างขึ้นเช่นกัน

— มิก
แหล่งที่มา

ฉันเข้าใกล้สิ่งนี้มาก ฉันได้ตั้งค่า ng-app = "แอพ" ... แล้วไม่ต้องติดตั้งโมดูล ดังนั้นมันจึงสะดุดความผิดพลาด ในฐานะผู้เริ่มต้นฉันเพิ่งลบชิ้นส่วน = "แอพ" เพื่อให้โค้ดตัวอย่างทำงานได้ หลังจากนั้นฉันจะติดตั้งโมดูลและการกำหนดเส้นทางที่เหมาะสม ... :)

— Eric Burdo

25

ข้อผิดพลาด noob สามารถลืมที่จะรวมโมดูล js

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

ไฟล์ใน index.html เลย

— otherDewi
แหล่งที่มา

24

น่าประหลาดใจที่ข้อความการดีบัก / ข้อผิดพลาดมีความเลว

— K - ความเป็นพิษใน SO กำลังเพิ่มขึ้น

3

ฮ่า ๆ. ฉันพูดกับตัวเองไม่ฉันไม่สามารถทำผิดพลาดง่าย ๆ นี้ได้ และฉันก็ผ่านคำตอบของคุณหลายครั้ง แต่มันแก้ปัญหาของฉันได้

— Maubeh

มันเกี่ยวกับการนำเข้าบางส่วนที่ขาดหายไป

— famas23

13

สำหรับผู้ที่ใช้เฟรมเวิร์กที่บีบอัดบันเดิลและลดขนาดไฟล์ตรวจสอบให้แน่ใจว่าคุณกำหนดแต่ละการพึ่งพาอย่างชัดเจนเนื่องจากเฟรมเวิร์กเหล่านี้มักจะเปลี่ยนชื่อตัวแปรของคุณ เกิดขึ้นกับฉันในขณะที่ใช้ ASP.NET BundleConfig.csเพื่อรวมสคริปต์แอปของฉันเข้าด้วยกัน

ก่อน

app.config(function($routeProvider) {
    $routeProvider.
      when('/', {
          templateUrl: 'list.html',
          controller: 'ListController'
      }).
      when('/items/:itemId', {
          templateUrl: 'details.html',
          controller: 'DetailsController'
      }).
      otherwise({
          redirectTo: '/'
      });
});

หลังจาก

app.config(["$routeProvider", function($routeProvider) {
    $routeProvider.
      when('/', {
          templateUrl: 'list.html',
          controller: 'ListController'
      }).
      when('/items/:itemId', {
          templateUrl: 'details.html',
          controller: 'DetailsController'
      }).
      otherwise({
          redirectTo: '/'
      });
}]);

อ่านเพิ่มเติมได้ที่นี่เกี่ยวกับคำอธิบายประกอบเชิงมุมพึ่งพา

— โมเสสมาชัว
แหล่งที่มา

12

หากคุณมีข้อผิดพลาดนี้ในคอนโซล([$injector:nomod], MINERR_ASSET:22)ตรวจสอบให้แน่ใจว่าคุณไม่ได้รวมรหัสแอปพลิเคชันของคุณก่อนที่จะโหลดAngularJS

ฉันทำอย่างนั้นและเมื่อฉันแก้ไขคำสั่งนั้นแล้ว

— Jasdeep Singh
แหล่งที่มา

9

ฉันเพิ่งพบข้อผิดพลาดเดียวกันในกรณีของฉันมันเกิดจากพารามิเตอร์ที่สองในangular.moduleการหายไป - หวังว่านี้อาจช่วยคนที่มีปัญหาเดียวกัน

~~angular.module('MyApp');~~

angular.module('MyApp', []);

— Anth12
แหล่งที่มา

1

นี่คือปัญหาของฉัน; ฉันพลาดการประกาศของangular.module ('my.Namespace', []); ก่อนใช้angular.module ('my.Namespace'). directive ('myDirective', [...

— ScottFoster1000

7

add to link
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>

var app = angular.module('apps', [ 'ngRoute' ]);

— SirajuddinLuck
แหล่งที่มา

ลืมว่าคุณต้องรวม src เมื่อใช้การอ้างอิงที่เฉพาะเจาะจง!

— K - ความเป็นพิษใน SO กำลังเพิ่มขึ้น

6

ฉันมีปัญหาเดียวกันและพยายามแก้ปัญหาที่เป็นไปได้ทั้งหมด แต่ในที่สุดฉันก็รู้จากเอกสารที่ngRouteตอนนี้แยกโมดูล ไปที่ลิงค์นี้

การแก้ไข: เพิ่ม cdn angular-route.jsหลังจากสคริปต์angular.min.js

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

— Bastin Robin
แหล่งที่มา

5

ทริกเกอร์อื่นสำหรับข้อผิดพลาดนี้กำลังออกจาก "." ก่อนหน้า "อื่น ๆ " หรือเส้นทางอื่น ๆ ในการกำหนดเส้นทางของคุณ:

  app.config(['$routeProvider',
     function($routeProvider) {
        $routeProvider.
           when('/view1', {
              templateUrl: 'partials/view1.html',
              controller: 'Ctrl1'
           }).
           otherwise({
              redirectTo: '/viewCounts'
           });
     }]);

เสียใจด้วยการหยุดเต็มรูปแบบอีกครั้ง ต้องรัก JS!

— ฮิลลารี
แหล่งที่มา

4

นอกจากคำตอบด้านล่างหากคุณมีข้อผิดพลาดในคอนโซล ( [$injector:nomod], MINERR_ASSET:22) แต่ทุกอย่างดูเหมือนจะทำงานได้ดีตรวจสอบให้แน่ใจว่าคุณไม่มีซ้ำซ้อนรวมอยู่ใน index.html ของคุณ

เนื่องจากข้อผิดพลาดนี้ยังสามารถยกขึ้นได้หากคุณมีไฟล์ซ้ำรวมอยู่ด้วยซึ่งใช้โมดูลนี้และรวมอยู่ก่อนไฟล์ด้วยการประกาศโมดูลจริง

— pleerock
แหล่งที่มา

3

หากคุณผ่านการสอนอย่างเป็นทางการของ angularjs https://docs.angularjs.org/tutorial/step_07

หมายเหตุ: เริ่มต้นด้วย AngularJS เวอร์ชัน 1.2, ngRoute อยู่ในโมดูลของตัวเองและต้องโหลดโดยการโหลดไฟล์เพิ่มเติม angular-route.js ซึ่งเราดาวน์โหลดผ่าน Bower ด้านบน

นอกจากนี้โปรดทราบจาก ngRoute api https://docs.angularjs.org/api/ngRoute

การติดตั้งก่อนรวม angular-route.js ใน HTML ของคุณ:

คุณสามารถดาวน์โหลดไฟล์นี้ได้จากสถานที่ต่อไปนี้:

Google CDN เช่น //ajax.googleapis.com/ajax/libs/angularjs/XYZ/angular-route.js Bower เช่น bower ติดตั้ง angular-route @ XYZ code.angularjs.org เช่น "//code.angularjs.org/XYZ/ angular-route.js "โดยที่ XYZ เป็นรุ่น AngularJS ที่คุณกำลังใช้งาน

จากนั้นโหลดโมดูลในแอปพลิเคชันของคุณโดยเพิ่มเป็นโมดูลที่ต้องพึ่งพา:

angular.module ('แอป', ['ngRoute']); เมื่อคุณพร้อมที่จะเริ่มต้น!

— zahid9i
แหล่งที่มา

2

John Papa ให้ปัญหาของฉันกับความคิดเห็นที่ค่อนข้างคลุมเครือนี้ : บางครั้งเมื่อคุณได้รับข้อผิดพลาดนั่นหมายความว่าคุณไม่มีไฟล์ บางครั้งก็หมายถึงโมดูลที่ถูกกำหนดหลังจากที่มันถูกใช้ วิธีหนึ่งในการแก้ไขปัญหานี้ได้อย่างง่ายดายคือตั้งชื่อไฟล์โมดูล * .module.js และโหลดไฟล์เหล่านั้นก่อน

— หยอกเย้า
แหล่งที่มา

0

ปัญหาของฉันอยู่ใน config.xml การเปลี่ยนแปลง:

<access origin="*" launch-external="yes"/>

ถึง

<access origin="*"/>

ซ่อมมัน.

— แฟรงค์โครี่
แหล่งที่มา

0

มันเป็นข้อผิดพลาดของหัวฉีด คุณอาจใช้ไฟล์ JavaScript จำนวนมากดังนั้นหัวฉีดอาจหายไป

บางคนอยู่ที่นี่:

var app = angular.module('app', 
    ['ngSanitize', 'ui.router', 'pascalprecht.translate', 'ngResource', 
     'ngMaterial', 'angularMoment','md.data.table', 'angularFileUpload', 
     'ngMessages', 'ui.utils.masks', 'angular-sortable-view',          
     'mdPickers','ngDraggable','as.sortable', 'ngAnimate', 'ngTouch']
);

โปรดตรวจสอบหัวฉีดที่คุณต้องใส่ในของคุณ app.js

— Bipin Shilpakar
แหล่งที่มา

0

บางครั้งฉันเห็นข้อผิดพลาดนี้เมื่อคุณสลับไปมาระหว่างโครงการและเรียกใช้โครงการบนพอร์ตเดียวกันหนึ่งหลังจากที่อื่น ในการที่เครื่องมือกรณีโกโตะโครเมี่ยมสำหรับนักพัฒนาซอฟต์แวร์> เครือข่ายและพยายามที่จะตรวจสอบที่เกิดขึ้นจริง js if the file match with the workspceไฟล์ที่เขียนขึ้นสำหรับ: หากต้องการแก้ไขตัวเลือกนี้Disable Cacheภายใต้เครือข่าย

— Shashi Ranjan
แหล่งที่มา

0

หลังจากหลายเดือนฉันกลับไปพัฒนาแอพ AngularJS ( 1.6.4 ) ซึ่งฉันเลือก Chrome (PC) และ Safari (MAC) เพื่อทดสอบในระหว่างการพัฒนา รหัสนี้แสดงข้อผิดพลาดนี้: $ injector: modulerr Module ErrorในIE 11.0.9600 (Windows 7, 32-bit)

จากการตรวจสอบพบว่าข้อผิดพลาดเกิดจากforEach loop ถูกใช้เพียงแทนที่ลูปforEachทั้งหมดเป็นปกติสำหรับลูปสำหรับสิ่งที่ทำงานตามที่เป็น ...

มันเป็นปัญหาของ IE11 (ตอบที่นี่ ) แทนที่จะเป็นปัญหาของ AngularJS แต่ฉันต้องการใส่คำตอบนี้ไว้ที่นี่เพราะข้อยกเว้นที่ยกขึ้นนั้นเป็นข้อยกเว้นของ AngularJS หวังว่ามันจะช่วยพวกเราบางคนออกไปที่นั่น

เหมือนกับ อย่าใช้ฟังก์ชั่นแลมบ์ดา ... เพียงแทนที่ () => {... } ด้วยฟังก์ชัน ol ดี '() {... }

— Akber Iqbal
แหล่งที่มา

0

ฉันมีปัญหานี้และหลังจากตรวจสอบโค้ดของฉันทีละบรรทัดฉันเห็นสิ่งนี้

 <textarea class="form-control" type="text" ng-model="WallDesc" placeholder="Enter Your Description"/>

ฉันเพิ่งเปลี่ยนเป็น

     <textarea class="form-control" type="text" ng-model="WallDesc" placeholder="Enter Your Description"></textarea>

และมันก็ใช้งานได้ ตรวจสอบแท็กของคุณ

— Aref Bozorgmehr
แหล่งที่มา