Маршрутизатор Angular2: изменение маршрута не загружает компонент в первый раз

Я меняю маршрут приложения angular2 с '/' на '/xyz'. Для xyz я создал компонент с именем XYZComponent. Этот XYZComponent реализует хук для жизненного цикла маршрутизатора с именем «CanActivate». В этом хуке я меняю заголовок страницы для нового маршрута.

@CanActivate((next, prev) => { 
   document.title = "mysite | xyz" 
   return true; 
})

Затем я реализую OnInit для этого компонента и вызываю метод "ngOnInit()". В этом методе я вызываю сервер, чтобы дать мне некоторые данные. Эти данные хранятся в переменной с именем xyzData, которая привязана к шаблону. Мой шаблон:

<div class="xyzComp">
 <p>{{xyzData.msg}}</p>
</div>

Онинит это:

ngOnInit(){
    console.log("xyz component init");
    this._myRestfulService.getXyz()
        .subscribe(data => {
            console.log("success",data);
            this.xyzData = data;
        }, err => {
            this.xyzData = {msg:"cannot get data"};
            console.log("error", err);
        });
}

Изменение маршрута выполняется путем вызова _route.navigate(["XYZ"]) нажатием кнопки с именем xyzBtn, которая присутствует в заголовке моего приложения. Заголовок является постоянным для всех маршрутов.

Проблема в том, что когда я нажимаю xyzBtn в первый раз, он вызывает только то, что написано в декораторе @CanActivate XYZComponent. В следующий раз, когда я нажимаю xyzBtn, @CanActivate не вызывается, но на этот раз вызывается ngOnInit().

Пожалуйста помоги мне с этим. Эта проблема возникает только тогда, когда я развертываю свой код на сервере. Сервер развертывания — сервер NGINX. На сервере nginx мы настроили игнорирование маршрутов внешнего интерфейса.

Однако мой код отлично работает на сервере разработки, который представляет собой модуль npm с именем lite-server.

Обновление. Он хорошо работает на других серверах на основе npm, таких как http-сервер.

Update2 — Plunker: https://plnkr.co/edit/E4HNXEjaIP7th77UE4dK?p=preview

Update3 - я использую пакетный файл на сервере. Сборка пакета через сборщик systemjs. Может ли это быть проблемой?


person Vineet 'DEVIN' Dev    schedule 21.04.2016    source источник
comment
Не могли бы вы предоставить плункер plnkr.co/edit/SEmINY?p=info? трудно понять, что вы делаете с этими информационными фрагментами.   -  person Günter Zöchbauer    schedule 21.04.2016
comment
(Ожидание plunkr), кстати, @CanActivate здесь кажется ненужным, вы возвращаете true без какой-либо проверки. И вы можете установить заголовок в ngOnInit().   -  person Ankit Singh    schedule 21.04.2016
comment
Обновлен плункер   -  person Günter Zöchbauer    schedule 21.04.2016
comment
Что означает настройка на игнорирование маршрутов внешнего интерфейса? Так что на самом деле это проблема сервера или конфигурации сервера, а не проблема Angular?   -  person Günter Zöchbauer    schedule 21.04.2016
comment
Используете ли вы файлы сценариев Angulars *.min.js? Я думаю, что они все еще сломаны. Вместо этого попробуйте *.dev.js.   -  person Günter Zöchbauer    schedule 21.04.2016
comment
@GünterZöchbauer - я использую .dev.js. Но я связываю и минимизирую свои локальные модули. Одно можно сказать наверняка, этот пакетный файл вызывает у меня проблему.   -  person Vineet 'DEVIN' Dev    schedule 22.04.2016
comment
Я не использую TS (только Dart) и не знаю о комплектации. Может еще кто...   -  person Günter Zöchbauer    schedule 22.04.2016
comment
Я понял проблему. С комплектом модулей systemjs   -  person Vineet 'DEVIN' Dev    schedule 22.04.2016
comment
собрать все js не работает, пробовал. Я тоже ищу решение, где я мог бы обслуживать один толстый js   -  person Pratik Kelwalkar    schedule 22.04.2016


Ответы (2)


https://github.com/angular/angular/issues/8166

Проблема решается удалением system-polyfill

person Michael Cebrian    schedule 11.05.2016

Конкретного ответа на эту проблему нет. Просто и Angular2, и SystemJ находятся в стадии бета-тестирования. Вы не можете использовать мини-файлы angular2 или его зависимых модулей. Также вы не можете комбинировать свои системные js-модули с несистемными javascript-файлами.

Итак, если у вас есть файлы nonsys.js, sys1.js и sys2.js в вашем проекте. Вы не можете объединить все три из них и обслуживать их с сервера. Но вы можете объединить sys1.js и sys2.js, чтобы получить sys-all.js, а затем передать 2 разных файла с вашего сервера в браузер.

Извините, ребята, это не просто проблема Angular2, а проблема системы js.

person Vineet 'DEVIN' Dev    schedule 22.04.2016