AngularJS $注射器問題

在試圖使用角度路線時，我總是收到相同的注射器問題。

angular.js:38 Uncaught Error: [$injector:modulerr] 
http://errors.angularjs.org/1.6.3/$injector/modulerr? 
p0=testApp&p1=Error%3A..2F%2Flocalhost%3A3000%2Fnode_modules%2Fangular%2Fangular.min.js%3A22%3A179)

這是我的index.html： -

<!DOCTYPE html> 
<html ng-app="testApp"> 
<head> 
    <title>TestCase</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
    <link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" /> 
    <link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" /> 
    <link rel="stylesheet" href="styles/app.css" type="text/css"> 
    <link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
</script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"> 
</script> 
<script src="/node_modules/angular/angular.min.js"></script> 
<script src="/node_modules/angular-route/angular-route.js"></script> 
<script src="/node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
<script src="app.module.js"></script> 
<script src="header-element/header-element.module.js"></script> 
<script src="header-element/header-element.component.js"></script> 
<script src="footer-element/footer-element.module.js"></script> 
<script src="footer-element/footer-element.component.js"></script> 
</head> 
<body> 
<header-element></header-element> 
    <div> 
    <ng-view></ng-view> 
    </div> 
<footer-element></footer-element> 
</body>

包括代碼以表明我已經包含的元素。所述app.module.js如下： -

'use strict'; 
angular.module('testApp',[ 
'ngRoute', 
'mobile-angular-ui', 
'ngMaterial', 
'headerElement', 
'footerElement', 
'thelaElement' 
]);

ThelaElement是已被應用於NG- 視圖中使用的定製組件。編輯： -

我包括我爲ng-view創建的自定義組件。標題組分和頁腳部件是相同的這就是爲什麼我將分享他們中的一個： - 首標元素如下： -

'use strict'; 
angular.module('headerElement',[]). 
    component('headerElement',{ 
    templateUrl : 'header-element/header-element.template.html', 
    controller : [ 
    function HeaderController() { 
     this.alternateMenu = true; 
     this.navElements = [ 
     {name : 'Thela', link: 'thela', alt: 'Home'}, 
     {name : 'xxcv', link: 'xxcv', alt: 'Item 2'}, 
    {name : 'dfgrt', link: 'dfgrt', alt: 'Item 3'}, 
    {name : 'Dqwe', link: 'derfe', alt:'Item 4'}, 
    {name : 'Pasd', link: 'qwe', alt: 'Item 5'}, 
    {name : 'asdf', link: 'jkhl', alt: 'Contact'} 
    ]; 
    } 
] 
});

的thela-元素被定義爲如下： -

'use strict'; 
angular.module('thelaElement',[]). 
    component('thelaElement', { 
    templateUrl : 'thela-element/thela-element.template.html', 
    controller : [ 
    function thelaController() { 
    this.link = 'thela'; 
    this.image1 = 'img/1.png'; 
    this.image2 = 'img/2.png'; 
    } 
] 
});

來源

2017-03-16 Sourajyoti Bose

請顯示您的代碼 - 這是一個非常常見的錯誤，通常表示您忘記了包含文件或其他內容。 –

你應該在這裏包含你所有的自定義模塊 – mbeso

你沒有使用任何'IIFE'函數，或者你從片段中排除它們？ – mbeso

問題是角度版本與角度材料版本不匹配。我進入package.json並將版本設置爲必需的版本。這有助於解決問題。

來源

2017-03-16 17:52:37

AngularJS $注射器問題

回答

相關問題