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插件，其中一些变量已本地化为角度脚本。

我使用角度为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));
            };
        });



    })();

该应用程序仍可在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  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'，function（）{}）;而是创建你的   自己的模块，并将其作为依赖项添加到您的应用程序的顶级   模块。有关更多信息，请参阅＃9692和＃7709

您使用的是什么版本的AngularJS？您可能会遇到第二个问题描述。

AngularJS应用程序适用于localhost但在服务器

1 个答案: