AngularJS TypeError: d is undefined - Firefox, angular-route.min.js:7 Uncaught TypeError: Cannot read property 'isArray' of undefined - Chrome

Question

我正在开发一个基于 AngularJS 的响应式单页 Web 应用程序，显示一些数据，但我遇到了一个可能与 RequireJS 相关的问题。我在使用 Firefox 和Uncaught TypeError: Cannot read property 'isArray' of undefined 时收到d is undefined，但在刷新 Chrome 后一切看起来都正常（不适用于 Firefox）。代码如下：

RequireJS 配置：

requirejs.config({
baseUrl: 'js',
paths: {
    angular: [
    'lib/angular.min',
    'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min'
    ],
    angularRoute: [
    'lib/angular-route.min',
    'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min'
    ]
}
});

脚本

define(['angular','angularRoute'], function($) {

var app = angular.module("myModule", ["ngRoute"]) 
                 .config(function($routeProvider) { 
                    $routeProvider
                        .when("/home", { 
                            templateUrl: "templates/home.html",
                            controller: "homeController" 
                        })
                        .when("/repositories", {
                            templateUrl: "templates/repositories.html",
                            controller: "repositoriesController"
                        })
                        .when("/contributors", {
                            templateUrl: "templates/contributors.html",
                            controller: "contributorsController"
                        })
                        .otherwise({
                            redirectTo: "/home"
                        })
                 })
                 .controller("homeController", function($scope) {
                    $scope.headingOne = "App description";

                 })
                 .controller("repositoriesController", function($scope, $http, $log) {
                    $http.get('https://api.github.com/users/x-formation/repos')
                        .then(function(response) {
                            $scope.gitHub = response.data;
                        })
                    $scope.headingTwo = "X-Formation public repositories";  
                    $scope.sortColumn = "forks_count";
                    $scope.reverseSort = true;

                    $scope.sortData = function(column)  {
                        $scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
                        $scope.sortColumn = column;
                    }

                    $scope.getSortClass = function (column) {
                        if ($scope.sortColumn == column) {
                        return $scope.reverseSort ? 'arrow-down' : 'arrow-up';
                        }
                    return '';
                    }
                 })
                 .controller("contributorsController", function($scope, $http) {
                    $http.get('http://cors.io/?u=https://www.x-formation.com/wp-content/uploads/2014/09/contributors.json')
                        .then(function(response) {
                            $scope.xFormationData = response.data;
                        })
                    $scope.headingThree = "Top contributors";   
                    $scope.sortColumn = "contributions";
                    $scope.reverseSort = true;

                    $scope.sortData = function(column)  {
                        $scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
                        $scope.sortColumn = column;
                    }

                    $scope.getSortClass = function (column) {
                        if ($scope.sortColumn == column) {
                        return $scope.reverseSort ? 'arrow-down' : 'arrow-up';
                        }
                    return '';
                    }
                 })

});

我最近才开始，我觉得这有点超出我的能力范围，但我最终必须知道。

Answer 1

在您的代码中突出的第一件事是您的 require 语句：

define(['angular','angularRoute'], function($) {

您需要传递angular，而不是$ 符号。

您的要求设置也缺少一些 shim 设置。关注这篇文章https://www.startersquad.com/blog/angularjs-requirejs/，看看能不能解决你的问题。