angularJS npm 包和依赖项的问题

Question

这是我得到的错误

 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)

这就是 angular.js 第 38 行的样子（第一行以函数 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);
  };
}

我认为这个错误是我如何调用 angularJS 库和其他几个 angularJS npm 包的结果。

这是我的 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>

这里是我调用依赖项的地方..

var app = angular.module("myApp", [ 'ngRoute', 'angularFileUpload',]);

我对错误可能出在哪里一无所知。有什么想法吗？

Answer 1

删除"angularFileUpload"依赖后的逗号。应该是

var app = angular.module("myApp", [ 'ngRoute', 'angularFileUpload']);

此外，ng-file-upload 模块名称是 ngFileUpload 而不是 angularFileUpload

angularJS npm 包和依赖项的问题

Issue with angularJS npm packages and dependencies

dependency-injection

node.js

angularjs

angular-route-segment

ng-file-upload