【问题标题】:Failed to instantiate module [module name] due to: Error: [$injector:modulerr]由于以下原因无法实例化模块 [模块名称]:错误:[$injector:modulerr]
【发布时间】:2023-03-27 03:30:02
【问题描述】:

我在将moment.js 注入我的模块myApp 时遇到问题。我遵循了来自https://github.com/urish/angular-momenthttps://www.npmjs.com/package/angular-momentjs 的文档,但无济于事。阅读其他类似的问题和答案,很可能是由于语法不正确,但我看不到。有什么想法吗?

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src="scripts/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="scripts/angular-moment.js"></script>
<script src="scripts/app.js"></script>

<main ng-app="myApp" ng-controller="appCtrl">
    <div class="container">             
        <section class="ng-view">

        </section>
    </div>
</main>

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

app.controller('transCtrl', ['$scope', '$http', 'moment', function($scope, $http, moment){
    $http.get('../json/transactions.json')
    .then(function(response){
        $scope.transaction = response.data.transactions;
    }, function(errResponse){
        alert('error');   
    });

    $scope.sortType     = 'transId'; // set the default sort type
    $scope.sortReverse  = false;  // set the default sort order
    $scope.searchTrans   = '';     // set the default search/filter term

    $scope.date = new moment();

    console.log($scope.date)

}]);

【问题讨论】:

  • 您是否尝试在应用中的 ngRoute 之前注入 angularMoment?
  • 你应该在控制器中注入 angularMoment,而不是 moment
  • @quirimmo 你是sure about that?
  • 试过了,结果一样
  • 不抱歉在控制器内部你应该只注入moment 而不是angularMoment

标签: javascript angularjs momentjs angular-moment


【解决方案1】:

由于您包含来自scripts 文件夹的moment.jsangular-moment,您应该将这两个文件下载到scripts 文件夹并确保您的服务器为scripts 文件夹服务为静态(这可以通过查看浏览器的network标签来确认)。

以下示例使用在线脚本并且工作正常。

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

app.controller('transCtrl', ['$scope', '$http', 'moment', function($scope, $http, moment) {
  $scope.date = new moment();

  console.log($scope.date)

}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<!-- <script src="scripts/moment.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.0/moment.js"></script>
<!-- <script src="scripts/angular-moment.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.js"></script>

<div ng-app="myApp" ng-controller="transCtrl">
  <div class="container">

  </div>
</div>

【讨论】:

  • 我的脚本中一定有其他问题。仍然显示相同的错误。还有什么可能吗?我在我的&lt;head&gt; 标签中声明了&lt;script&gt; 标签。我的transCtrl 控制器放在哪里重要吗?
  • @PatrickMcDermott 不,没关系。你确认所有脚本都加载成功了吗?
  • 在我的本地主机上有什么问题吗?
  • @PatrickMcDermott 这就是问题所在。你的服务器端是什么?节点?春天? 。网?你应该在那里检查。
  • @PatrickMcDermott 只需检查您的scripts 文件夹是否与index.html 位于同一位置。这可能有效。
【解决方案2】:

您需要先添加angular.min.js 脚本。并在angular-moment.js之前添加moment.js

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src="scripts/moment.js"></script>
<script src="scripts/angular-moment.js"></script>
<script src="scripts/app.js"></script>

【讨论】:

  • 进行了更改,问题仍然存在
  • 你在angular-moment.js之前添加了moment.js
  • 是的,我做到了,真的不知道为什么会失败
  • 当我移除 angularMoment 注入时,应用程序运行
猜你喜欢
  • 2018-09-29
  • 1970-01-01
  • 2019-08-17
  • 1970-01-01
  • 1970-01-01
  • 2018-09-10
  • 1970-01-01
  • 2016-05-23
  • 2016-11-07
相关资源
最近更新 更多