Angularjs: Rendering components causes request loop

Asked

Viewed 70 times

0

I am working on a legacy project, written in Angularjs 1.5.8 and ASP.NET 4.5.

In order to upgrade the project Clientside to Angular, the first step I had to take was to compose the system.

However, I am facing a problem when having to render some component, such as:

<body class="hold-transition sidebar-mini fixed" md-no-ink>
<div class="wrapper" style="height:calc(100%)" loading-listener column="row" flex>
    <div style="height:calc(100%)" class="display-hidden" ng-class="true ? 'display-block':''">
        <div layout="row" style="height:100%">
            <app-sidenav></app-sidenav>
            <div flex>
                <div layout="column" flex>
                    <div flex>
                        <app-toolbar></app-toolbar>
                    </div>
                    <main flex>
                        @RenderBody()
                    </main>
                </div>
            </div>
        </div>
    </div>
</div>

When trying to render any component, as in the case, the sidenav and Toolbar, the problem occurs, does not generate any error, but stays in a request loop, loading all components again and again, when this occurs the browser until it stops responding to commands, how to close for example, does not lock, but I have to close the process because the button does not perform the action.

I appreciate anyone who can help me.

Edit 01 - I added the appTopMenu component’s . js code.

angular.module('messageModule')
.component('appTopMenu', {
    templateUrl: 'components/message-component/message.template.html',
    controller: ["$scope", "$mdToast", "$location", "$rootScope", "CommonService", "Enums",
        function MessageController($scope, $mdToast, $location, $rootScope, CommonService, Enums) {
            $rootScope.AppInfo = Enums.AppInfo;
            $rootScope.$on("user:loggedin", function () {
                $scope.mensagens = [];
                $mdToast.hide();
            });

            $rootScope.Sair = function () {
                $rootScope.loggedUser = false;
                CommonService.autenticacao.sair().$promise.then(function () {
                    location.reload();
                });
            };

            $rootScope.$on('user:notlogged', function () { $rootScope.Sair(); });
            $scope.mensagens = [];
            $scope.icone = Enums.MsgIcon;
            $scope.cor = Enums.MsgColorContext;

            $rootScope.reqsActive = 0;
            $rootScope.closeToast = function () {
                $mdToast.hide();
            };

            xhook.after(function (request, response, callback) {
                callback();
                $rootScope.reqsActive--;

                if (request.url !== 'go/autenticacao' && response.finalUrl.indexOf('go/Autenticacao') >= 0) {
                    $rootScope.$emit("user:notlogged");
                }
                $rootScope.url = $location.path();
                if ($rootScope.reqsActive === 0) {
                    $rootScope.$broadcast("loading:completed");
                }

                var data = {};
                try {
                    if (response.headers['content-type'].indexOf("application/json") < 0) {
                        return;
                    }
                    else {
                        if (response.data.indexOf("{\"Messages\":[]") < 0)
                            data = JSON.parse(response.data);
                        else
                            return;
                    }
                } catch (e) {
                    return;
                }

                var htMessages = [];
                if (data.Message && true) {
                    data.Messages = [];
                    data.Messages.push({ Type: "E".charCodeAt(0), Message: data.Message });
                    data.Messages.push({ Type: "E".charCodeAt(0), Message: data.ExceptionMessage });
                }

                if (data && data.Messages && !data.NotInterceptable) {
                    $.each(data.Messages,
                        function (i, msg) {
                            tipo = String.fromCharCode(msg.Type);
                            htMessages.push('<div class="md-toast-content progress-bar-striped alert-' + $scope.cor[tipo] + '">' +
                                '<span class="md-toast-text" flex>' + msg.Message + '</span>' +
                                '<md-button ng-click="$root.closeToast()"> OK </md-button>' +
                                '</div>');
                            $scope.mensagens.push({ tipo: tipo, texto: msg.Message });
                        });

                    var el = $("body")[0];
                    if (data.Messages.length)
                        $mdToast.show({
                            parent: el,
                            template: '<md-toast style="z-index:90007">' + htMessages.join("") + '</md-toast>',
                            hideDelay: 8000,
                            position: "top right"
                        });
                }
            });

            $rootScope.$broadcast("loading:completed");

            xhook.before(function (request, callback) {
                request.headers["Pragma"] = "no-cache";
                callback();
                if ($rootScope.reqsActive === 0) {
                    $rootScope.$broadcast("loading:started");
                }

                $rootScope.reqsActive++;
            });
        }
    ]
});
  • 1

    You would have Javascript to add to the question?

1 answer

0

RESOLVED

At the end of the day, one more directory was missing in the templateUrl.

I changed of: templateUrl: 'components/message-component/message.template.html'

for: templateUrl: 'SPA/components/message-component/message.template.html'

And it all worked again.

So much searching for something so basic heheh I hope I can help someone who goes through the same.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.