AngularJS 1.2 $ injector: modulerr

445

Ketika menggunakan sudut 1.2 bukannya 1.07 potongan kode berikut ini tidak valid lagi, mengapa?

'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: '/'
        });
    }
]);

masalahnya ada di bagian konfigurasi injektor (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)

Jika saya ingat dengan benar masalah ini dimulai dengan sudut 1.1.6.

javascript angularjs shoen
sumber

Jawaban:

636

Masalahnya disebabkan oleh tidak adanya modul ngRoute. Sejak versi 1.1.6 ini adalah bagian yang terpisah:

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

var app = angular.module('myapp', ['ngRoute']);
shoen
sumber
492
Jika Anda tidak yakin modul mana yang hilang, gunakan angular.js yang tidak diperkecil yang memberikan pesan kesalahan yang dapat dibaca:"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."
Mart
2
Hmm, saya menggunakan bower, dan menyediakan file .map - Saya bertanya-tanya mengapa Chrome masih menunjukkan kepada saya kesalahan dari file yang diperkecil. Terima kasih atas perhatiannya, @Mart!
Aditya MP
5
@ arg20, Anda akan menemukan jawabannya di sini: github.com/angular/angular.js/commit/…
Laurent
4
Sapi suci, saya telah mencari DI MANA SAJA solusi untuk ini. Saya memutakhirkan dari 1.0 ke 1.2 dan mendapatkan kesalahan ini. Satu-satunya saran yang dapat saya temukan adalah memastikan angular-route.js dimasukkan, yang mana itu .... Bukan penggemar dokumen Angular. Pokoknya terima kasih! Saya terpilih.
RachelD
4
Anda mungkin mendapatkan kesalahan ini jika Anda menggunakan angular.module ('myModule') alih-alih angular.module ('myModule', []) saat mendefinisikan modul Anda. stackoverflow.com/questions/16260538/…
Anirudhan J
42

kesalahan saya menghilang dengan menambahkan ini '()' di akhir

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

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

Satu hal lagi untuk ditambahkan ke daftar karena ini adalah hasil pertama yang muncul dengan pencarian google 'Kesalahan: [$ injector: modulerr] angular':

Jika Anda memiliki ketidakcocokan antara nama aplikasi Anda di 'index'html' Anda dan dalam definisi aplikasi javascript utama Anda, ini juga dapat menghasilkan kesalahan ini.

Misalnya jika HTML Anda terlihat seperti ini:

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

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

        etc ...

Dan JavaScript Anda terlihat seperti ini (mis. Memiliki kesalahan ketik pada nama aplikasi - myWebCite, bukan myWebSite):

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

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

kemudian kesalahan 'Kesalahan: [$ injector: modulerr] angular' juga akan dihasilkan.

Mick
sumber
Saya sudah sangat dekat dengan ini. Saya telah mengatur ng-app = "app" ... dan kemudian tidak pernah mengatur modul. Jadi itu tersandung kesalahan. Sebagai seorang pemula, saya baru saja menghapus bagian = "app" untuk membuat kode sampel saya berfungsi. Kemudian, saya mengatur modul dan perutean yang tepat ... :)
Eric Burdo
25

Kesalahan noob bisa lupa menyertakan modul js 

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

file dalam index.html sama sekali

otherDewi
sumber
24
Luar biasa betapa buruknya pesan debug / kesalahan dalam sudut.
K - Keracunan dalam SO tumbuh.
3
LOL. Saya berkata pada diri saya sendiri, tidak, saya tidak bisa membuat kesalahan sederhana ini. Dan saya melewati jawaban Anda beberapa kali. Tapi itu menyelesaikan masalah saya.
Maubeh
Ini tentang beberapa impor yang hilang
famas23
13

Untuk mereka yang menggunakan kerangka kerja yang kompres, bundel, dan memperkecil file, pastikan Anda mendefinisikan setiap ketergantungan secara eksplisit karena kerangka kerja ini cenderung untuk mengubah nama variabel Anda. Itu terjadi pada saya saat menggunakan ASP.NET BundleConfig.csuntuk menyatukan skrip aplikasi saya.

Sebelum

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

Setelah

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

Baca lebih lanjut di sini tentang Anotasi Ketergantungan Sudut.

Musa Machua
sumber
12

Jika Anda memiliki kesalahan ini di konsol ([$injector:nomod], MINERR_ASSET:22), pastikan Anda tidak memasukkan kode aplikasi Anda sebelum memuatAngularJS

Saya melakukan itu dan setelah saya memperbaiki pesanan, kesalahan hilang.

Jasdeep Singh
sumber
9

Saya baru saja mengalami kesalahan yang sama, dalam kasus saya itu disebabkan oleh parameter kedua angular.moduleyang hilang - semoga ini dapat membantu seseorang dengan masalah yang sama.

angular.module('MyApp');

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

Anth12
sumber
1
Ini masalah saya; Saya kehilangan deklarasi angular.module ('my.Namespace', []); sebelum menggunakan 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
sumber
Lupa Anda harus menyertakan src saat menggunakan dependensi tertentu!
K - Keracunan dalam SO tumbuh.
6

Saya memiliki masalah yang sama dan mencoba semua solusi yang mungkin. Tetapi akhirnya saya mengetahui dari dokumentasi bahwa ngRoutemodul sekarang terpisah. Lihat tautan ini

Solusi: Tambahkan skrip angular-route.js setelah skrip 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
sumber
5

Pemicu lain untuk kesalahan ini adalah meninggalkan "." keluar sebelum "sebaliknya" atau rute lain dalam definisi rute Anda:

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

Dirasa malu karena berhenti total, sekali lagi. Harus cinta JS!

Hilary
sumber
4

Selain jawaban di bawah, jika Anda memiliki kesalahan ini di konsol ( [$injector:nomod], MINERR_ASSET:22), tetapi semuanya tampaknya berfungsi dengan baik, pastikan Anda tidak memiliki duplikat yang termasuk dalam index.html Anda.

Karena kesalahan ini juga dapat dinaikkan jika Anda memiliki duplikat menyertakan file, yang menggunakan modul ini, dan disertakan sebelum file dengan deklarasi modul yang sebenarnya.

pleerock
sumber
3

Jika Anda membaca tutorial resmi angularjs https://docs.angularjs.org/tutorial/step_07

Catatan: Dimulai dengan AngularJS versi 1.2, ngRoute ada dalam modulnya sendiri dan harus dimuat dengan memuat file angular-route.js tambahan, yang kami unduh melalui Bower di atas.

Harap diperhatikan juga dari ngRoute api https://docs.angularjs.org/api/ngRoute

Instalasi Pertama termasuk angular-route.js dalam HTML Anda:

Anda dapat mengunduh file ini dari tempat-tempat berikut:

Google CDN misalnya //ajax.googleapis.com/ajax/libs/angularjs/XYZ/angular-route.js Bower misalnya bower instal route-route @ XYZ code.angularjs.org eg "//code.angularjs.org/XYZ/ "angular-route.js" di mana XYZ adalah versi AngularJS yang Anda jalankan.

Kemudian muat modul di aplikasi Anda dengan menambahkannya sebagai modul dependen:

angular.module ('app', ['ngRoute']); Dengan itu Anda siap memulai!

zahid9i
sumber
2

John Papa disediakan masalah saya di ini komentar yang agak jelas: Kadang-kadang ketika Anda mendapatkan kesalahan itu, itu berarti Anda akan kehilangan file. Lain kali itu berarti modul telah didefinisikan setelah digunakan. Salah satu cara untuk mengatasi ini dengan mudah adalah dengan menamai file-file modul * .module.js dan memuatnya terlebih dahulu.

Josh
sumber
0

Masalah saya ada di config.xml. Mengubah:

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

untuk

<access origin="*"/>

memperbaikinya.

Frank Conry
sumber
0

Ini kesalahan injektor. Anda mungkin telah menggunakan banyak file JavaScript sehingga injektor mungkin hilang.

Beberapa di sini: 

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']
);

Silakan periksa injektor yang perlu Anda masukkan ke dalam app.js

Bipin Shilpakar
sumber
0

Kadang saya melihat kesalahan ini ketika Anda beralih antara proyek dan menjalankan proyek pada port yang sama satu demi satu. Dalam kasus goto krom Developer Peralatan> Jaringan dan mencoba untuk memeriksa file yang ditulis js sebenarnya untuk: if the file match with the workspce. Untuk mengatasi ini pilih di Disable Cachebawah jaringan.

Shashi Ranjan
sumber
0

Setelah berbulan-bulan, saya kembali untuk mengembangkan aplikasi AngularJS ( 1.6.4 ), di mana saya memilih Chrome (PC) dan Safari (MAC) untuk pengujian selama pengembangan. Kode ini menyajikan Kesalahan ini : $ injector: modulerr Module Error on IE 11.0.9600 (Windows 7, 32-bit).

Setelah diselidiki, menjadi jelas bahwa kesalahan adalah karena forEach loop yang digunakan, hanya mengganti semua forEach loop dengan normal untuk loop untuk hal-hal untuk bekerja seperti ...

Itu pada dasarnya masalah IE11 (dijawab di sini ) daripada masalah AngularJS, tapi saya ingin meletakkan balasan ini di sini karena pengecualian yang diangkat adalah pengecualian AngularJS. Semoga ini bisa membantu sebagian dari kita di luar sana.

demikian pula. jangan gunakan fungsi lambda ... ganti saja () => {...} dengan fungsi ol yang baik () {...}

Akber Iqbal
sumber
0

Saya punya masalah ini dan setelah memeriksa kode saya baris demi baris saya melihat ini

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

Saya baru saja mengubahnya menjadi 

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

dan itu berhasil. jadi periksa tag Anda.

Aref Bozorgmehr
sumber