Добавление ng-route в мой проект Angular 1 создает непоследовательное поведение при загрузке - PullRequest
0 голосов
/ 20 сентября 2018

У меня есть угловой веб-проект 1.

Я запускаю его вручную, используя что-то вроде этого:

angular.module('myApp', ['ngRoute'])
var div = document.getElementById('mainApp');
angular.bootstrap(div, ['myApp']);

У меня также есть различные другие угловые компоненты для создания контента.

Я также добавил угловой ngRoute в свой проект для упрощения навигации.

Теперь проблема в том, что если я обновляю свою страницу, я иногда и совершенно случайно вижу другое поведение при загрузке.Иногда содержимое не загружается.

Что я заметил, так это то, что, когда содержимое не загружается, ни один из моих компонентов templateURL файлы не загружается.

По сути, похоже, что angular не настраивает вещиправильно.

Теперь я выяснил причину и на 90% уверен в этом.

Если я исключу свой файл app.route.js , яможно обновлять столько раз, сколько я хочу, и страница загружается правильно каждый раз, без исключения.

И ниже мой файл app.route.js (очень простой):

(function (app)
{
'use strict';

app.config(function ($routeProvider)
{
    $routeProvider.when("/",
        {
            template: "<home-page></home-page>",
        }).when("/xxx",
            {
                template: function (routeInfo)
                {
                    return "<h1>XXX</h1>"
                },
            });
});
})(angular.module('myApp', ['ngRoute']));

Тамникаких ошибок или чего-либо еще, только то, что компонент 'home-page' не загружает иногда .

Я видел это в мобильном приложении, над которым я тоже работал несколько месяцев назад, и думал, что это сложное приложение, но теперь это простой код.

Хочу отметить,я не вижу никаких ошибок, приложение загружает правильно несколько раз, если я включаю файл app.route.js.

И это не относится только к одному браузеру, это происходит в любом браузере.Однако ngRoute может быть совпадением.

Я ценю любую помощь, спасибо.

ОБНОВЛЕНИЕ 1: Некоторый прогресс, я полагаю

ДонЯ не думаю, что моя проблема вообще с ng-route.

Я думаю, что это связано с templateUrl внутри файлов компонентов.

Внутри моих компонентов я указываюURL шаблона, подобный следующему:

app.component('myComponent', {
    templateUrl: '/scripts/app/myComponent/myComponent.html?v=' + version,
    controller: myComponentController
});

Где версия является глобальным значением.

Теперь, когда я меняю версию и нажимаю F5 в браузере, иногда компоненты не загружаютпервый раз.Используя инструменты разработчика F12, я вижу, что ни один из html-файлов не загружен и даже не пытался загрузить.

Теперь я помню кое-что о необходимости использовать вместо этого функцию для шаблона.Вот так:

 app.component('myComponent', {
    templateUrl: function ()
    {
        return '/scripts/app/myComponent/myComponent.html?v=' + version;
    },
    controller: myComponentController
});

Кажется, до сих пор это работает лучше ...

ОБНОВЛЕНИЕ 2: Я обнаружил, что что-то на 100% реплицируется, что нарушает угловую загрузкуprocess.

Посмотрите на код ниже:

            setTimeout(function ()
            {
                var div = document.getElementById('mainApp');
                var app = angular.bootstrap(div, ['myApp']);
            }, 10);

            setTimeout(function ()
            {
                alert('bla bla bla');
            }, 11);

Когда я запускаю это, ни один из html-файлов моего углового компонента не загружается, и моя веб-страница все испортилась.

Но, просто изменив значение тайм-аута для предупреждения с 11 на 9 , вы получите волшебную работу.Даже 10 недопустимо.Он должен быть меньше значения тайм-аута, указанного в первом вызове.

Так что, очевидно, вызов оповещения вмешивается в процесс начальной загрузки Angular.Меня беспокоит, что еще может помешать этому?

Кто-нибудь сталкивался с чем-то подобным и решил это?

Обновление 3:

У меня естьЯ сделал больше тестов, и я создал простой тестовый проект, который иногда может повторить проблему при обновлении браузера.

Закрытие этого билета и задание нового вопроса

...