AngularJS应用程序可在localhost上运行，但会在服务器上引发错误

Question

我有一个angularJS测验应用程序，可以在localhost上正常工作。 一旦上传到实时服务器，该应用将无法加载，并且控制台会引发错误。 我不知道这是怎么回事，因为该应用程序在本地工作。 这是错误：

    Error: [$injector:modulerr] http://errors.angularjs.org/1.6.3/$injector/modulerr?p0=ng&p1=%5B%24compile%3Abaddir%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.3%2F%24compile%2Fbaddir%3Fp0%3Dng%2520%0AM%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A425%0Ac%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A16055%0Ay%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A16467%0AIc%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A1416%0Ap%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A1201%0Ay%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A16968%0ACe%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A3365%0Ainvoke%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A10908%0Ad%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A9758%0Ag%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A9905%0Ap%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A1011%0Ag%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A9667%0Aeb%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A11811%0Ac%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A3%3A373%0APc%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A3%3A686%0Aue%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A2%3A5429%0A%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A9%3A72076%0Ai%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A27444%0AfireWith%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A28213%0Aready%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A30004%0AK%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A30366%0A

有人有见识吗？ 我已将测验开发为wordpress插件，其中一些变量已本地化到angular脚本。

我在角度路线中使用角度1.6。 我的一些代码如下：

    (function(){

/*
 * Declaration of main angular module for this appllication.
 *
 * It is named quiz and has no dependencies (hence the 
 * empty array as the second argument)
 */
angular
    .module("quiz", []);

    })();

控制器：

    (function () {

angular
        .module("quiz")
        .controller("quizCtrl", QuizController);


QuizController.$inject = ['quizmanager'];

function QuizController(quizmanager) 
{
    ...

控制器：

    (function () {

angular
        .module("quiz")
        .controller("resultsCtrl", ResultsController);

ResultsController.$inject = ['quizmanager'];

function ResultsController(quizmanager) 
{
    var vm = this;

    vm.quizmanager = quizmanager; 

}


    })();

控制器：

    (function () {

angular
        .module("quiz")
        .controller("welcomeCtrl", WelcomeController);

WelcomeController.$inject = ['quizmanager'];

function WelcomeController(quizmanager) 
{
    var vm = this;

    vm.quizmanager = quizmanager; 

    vm.activateQuiz = activateQuiz; 
    /*
     * STARTING POINT OF APPLICATION. All the other views are hidden
     */
    quizmanager.loadQuiz();

    function activateQuiz() 
    {

        quizmanager.changeState("quiz", true);
        quizmanager.countdown();
      }
    }


    })();

根据您的答复，我认为问题出在这里：

工厂：

    (function () {


angular
        .module("quiz")
        .factory("quizmanager", QuizManager)
        .filter('formatTimer', function () {
            return function (input)
            {
                function z(n) {
                    return (n < 10 ? '0' : '') + n;
                }
                var seconds = input % 60;
                var minutes = Math.floor(input / 60);
                var hours = Math.floor(minutes / 60);
                return (z(hours) + ':' + z(minutes) + ':' + z(seconds));
            };
        });


QuizManager.$inject = ['$http', '$timeout', '$httpParamSerializer', '$filter']; 
    ......

我已经修改了应用程序，并将过滤器添加为单独的模块，如下所示：

    (function () {


angular
        .module("quiz")
        .filter('formatTimer', function () {
            return function (input)
            {
                function z(n) {
                    return (n < 10 ? '0' : '') + n;
                }
                var seconds = input % 60;
                var minutes = Math.floor(input / 60);
                var hours = Math.floor(minutes / 60);
                return (z(hours) + ':' + z(minutes) + ':' + z(seconds));
            };
        });



    })();

该应用程序仍然可以在本地主机上运行，​​但是我仍然收到错误消息：

     Error: [$injector:modulerr] http://errors.angularjs.org/1.6.3/$injector/modulerr?p0=ng&p1=%5B%24compile%3Abaddir%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.3%2F%24compile%2Fbaddir%3Fp0%3Dng%2520%0AM%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A425%0Ac%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A16055%0Ay%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A16467%0AIc%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A1416%0Ap%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A1201%0Ay%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A16968%0ACe%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A3365%0Ainvoke%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A10908%0Ad%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A9758%0Ag%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A9905%0Ap%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A1011%0Ag%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A9667%0Aeb%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A11811%0Ac%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A3%3A373%0APc%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A3%3A686%0Aue%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A2%3A5429%0A%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A9%3A72076%0Ai%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A27444%0AfireWith%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A28213%0Aready%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A30004%0AK%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A30366%0A  angular.min.js,qver=1.0.0.pagespeed.jm.L2GCHQP8hk.js:1:425

Answer 1

描述

当模块由于某些异常而无法加载时，会发生此错误。 上面的错误消息应提供其他上下文。

模块无法加载的常见原因是您忘记了将文件包含在已定义的模块中，或者无法加载该文件。

使用ngRoute

在AngularJS 1.2.0和更高版本中，ngRoute已移至其自己的模块。 如果升级到1.2.x或更高版本后出现此错误，请确保已安装ngRoute。

猴子补丁AngularJS的ng模块

如果尝试将自己的组件添加到ng模块，也会发生此错误。 从不支持此功能，从1.3.0版本开始，它将实际触发此错误。 例如，以下代码可能触发此错误。

angular.module（'ng'）。filter（'tel'，函数（）{}）; 而是创建您自己的模块，并将其作为依赖项添加到应用程序的顶级模块。 有关更多信息，请参见＃9692和＃7709

您正在使用哪个版本的AngularJS？ 您可能在这里遇到第二个问题描述。