0
Ceci est l'erreur que je reçoisProblème avec AngularJS NPM packages et dépendances
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=myApp&p1=Error%3A%2…arJS%2Fangular-my-app%2Fnode_modules%2Fangular%2Fangular.min.js%3A22%3A179)
at angular.js:38
at angular.js:4920
at q (angular.js:403)
at g (angular.js:4880)
at eb (angular.js:4802)
at c (angular.js:1914)
at Sc (angular.js:1935)
at ue (angular.js:1820)
at angular.js:33367
at HTMLDocument.b (angular.js:3431)
Ceci est ce que angularjs ligne 38 ressemble à (la première ligne commençant par la fonction minErr ...)
function minErr(module, ErrorConstructor) {
ErrorConstructor = ErrorConstructor || Error;
return function() {
var code = arguments[0],
template = arguments[1],
message = '[' + (module ? module + ':' : '') + code + '] ',
templateArgs = sliceArgs(arguments, 2).map(function(arg) {
return toDebugString(arg, minErrConfig.objectMaxDepth);
}),
paramPrefix, i;
message += template.replace(/\{\d+\}/g, function(match) {
var index = +match.slice(1, -1);
if (index < templateArgs.length) {
return templateArgs[index];
}
return match;
});
message += '\nhttp://errors.angularjs.org/1.6.4/' +
(module ? module + '/' : '') + code;
for (i = 0, paramPrefix = '?'; i < templateArgs.length; i++, paramPrefix = '&') {
message += paramPrefix + 'p' + i + '=' + encodeURIComponent(templateArgs[i]);
}
return new ErrorConstructor(message);
};
}
Je pense que cette erreur est le résultat de la façon dont j'appelle la bibliothèque angularJS et plusieurs autres paquets npm angularJS.
Voici les têtes des balises dans mon html ..
<!doctype html>
<html>
<head>
<title> Library </title>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" />
<!-- AngularJS library -->
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> -->
<script src="./node_modules/angular/angular.min.js"></script>
<!-- shim is needed to support non-HTML5 FormData browsers (IE8-9)-->
<script src="./node_modules/angular-route/angular-route.js"></script>
<script src="./node_modules/ng-file-upload/dist/ng-file-upload-shim.min.js"></script>
<script src="./node_modules/ng-file-upload/dist/ng-file-upload.min.js"></script>
</head>
<!--
The ng-app is called a directive. It tells AngularJS that the myApp module will live within the <body> element, termed the application's scope.
In other words, we used the ng-app directive to define the application scope. -->
<body ng-app="myApp">
<div class="header">
<div class="container">
<h1>Alexander Library</h1>
</div>
</div>
<!-- Like ng-app, ng-controller is a directive that defines the controller scope. This means that properties attached to $scope in MainController become available to use within <div class='main'> -->
<div class="main" ng-controller="MainController">
<div class="container">
<!-- This is called an expression - '{{ title }}'. Expressions are used to display values on the page.
Value of title we show up when we view it in the browser
-->
<h1>{{ title }}</h1>
<div>
<label><h3>Add A Book<h3></label>
<!-- <form> -->
<!-- Input controls provides data-binding by using the ng-model directive. -->
<!-- With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.
-->
<!-- <input id="name" ng-model="name" type="text" placeholder="Book Title">
<input id="price" ng-model="price" type="text" placeholder="Enter Book Price">
<input id="date" ng-model="date" type="date" placeholder="Publication Date">
<input id="cover-photo" type="file" ng-model="image"/>
<input ng-click="addBook()" type="submit" value="Submit">
<form> -->
<form ng-app="fileUpload" name="form">
Single Image with validations
<div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100"
ngf-resize="{width: 100, height: 100}">Select</div>
Multiple files
<div class="button" ngf-select ng-model="files" ngf-multiple="true">Select</div>
Drop files: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
<button type="submit" ng-click="submit()">submit</button>
</form>
</div>
<h2>{{ promo }}</h2>
<!-- the ng-repeat is another directive. It loops through an array and displays each element. Here, the ng-repeat repeats all the HTML inside <div class="col-md-6"> for each element in the products array. -->
<!-- What does 'product' stand for in 'product in products' ? -->
<!-- We do this so we aren't redundant with our code -->
<div ng-repeat="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ product.cover }}">
<!-- 'uppercase' is an AngularJS filter -->
<p class="title">{{ product.name | uppercase }}</p>
<!-- 'currency' is an AngularJS filer. It sends this number into the currency filter. The pipe symbol '|' then takes the output on the left and "pipes" it to the right. -->
<!-- The filter outputs a formatted currency with the dollar sign and the correct decimal places. -->
<p class="price">{{ product.price | currency }}</p>
<!-- 'date' is an AngularJS filter -->
<p class="date"> {{ product.pubdate | date }}</p>
<div class="rating">
<!-- The ng-click is a directive. When <p class="likes"> is clicked, ng-click tells AngularJS to run the plusOne() function in the controller. -->
<!-- We put the $ in front of index in order to select 'this' index from user click -->
<p class="likes" ng-click="plusOne($index)">+ {{ product.likes }}</p>
<p class="dislikes" ng-click="minusOne($index)">+ {{ product.dislikes }}</p>
</div>
<!-- <view-summary></view-summary> -->
</div>
</div>
<div class="footer">
<div class="container">
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<!-- Custom Directives -->
<script src="js/directives/viewSummary.js"></script>
</body>
</html>
Et voici où j'appelle mes dépendances ..
var app = angular.module("myApp", [ 'ngRoute', 'angularFileUpload',]);
Je suis frais d'idées sur l'endroit où l'erreur pourrait éventuellement être. Des pensées?
Pourquoi avez-vous deux balises '' script' pour angular.min.js'? –
s'il vous plaît donner votre code html complet. Comment définissez-vous la ng-app dans la vue? –
Je faisais beaucoup d'essais et d'erreurs. J'ai commenté celui avec le lien http. J'ai oublié de le sortir pour ça. –