У меня есть угловой веб-проект 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:
У меня естьЯ сделал больше тестов, и я создал простой тестовый проект, который иногда может повторить проблему при обновлении браузера.
Закрытие этого билета и задание нового вопроса