0
Je continue d'obtenir le même problème d'injecteur en essayant d'utiliser la route angulaire.
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)
Ceci est mon 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>
Y compris le code pour montrer les éléments que j'ai inclus. Les app.module.js est la suivante: -
'use strict';
angular.module('testApp',[
'ngRoute',
'mobile-angular-ui',
'ngMaterial',
'headerElement',
'footerElement',
'thelaElement'
]);
ThelaElement est un composant personnalisé qui a été utilisé pour être utilisé en vue ng- . Editer: -
J'inclus les composants personnalisés que j'ai créés pour la vue ng. L'en-tête-composant et le composant de pied de page est le même qui est la raison pour laquelle je vais partager l'un d'entre eux: - en-tête-élément est la suivante: -
'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'}
];
}
]
});
Le thela-élément est défini comme suit: -
'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';
}
]
});
Montrez votre code, s'il vous plaît - c'est une erreur très commune, et cela indique généralement que vous avez oublié d'inclure un fichier, ou quelque chose du genre. –
vous devez inclure tous vos modules personnalisés ici – mbeso
vous n'utilisez aucune fonction 'IIFE', ou vous les avez exclus de l'extrait? – mbeso