Angular2 и Turbolinks

Вот такая ситуация: я использую асинхронность. загрузка скриптов с помощью systemJS (под скриптами я подразумеваю jQuery, Angular2,...). Теперь я хотел бы внедрить в это Турболин-Ки. Все работает просто отлично, но моя угловая составляющая визуализируется только в первый раз. Если я использую Turbolinks для просмотра следующей страницы, мой компонент не отрисовывается. Нет ошибок в инспекторе объектов и в исходном коде только это: 

<search-app></search-app>

Я устал тестировать в инспекторе объектов, но после второй страницы это только HTML метка.

Вот мои скрипты загрузки в SystemJS в теге Head на моей странице: 

System.config({

            meta: {
                '/bundles/frontall': { format: 'global' },
                '/bundles/raphael': { format: 'global' },
                '/bundles/zopim': { format: 'global' },
                '/bundles/angular2': { format: 'global' }
            },

            packages: {
                'angular': {
                    format: 'register',
                    defaultExtension: 'js'
                },

                'angular2': {
                    format: 'global',
                    defaultExtension: 'js'
                },

                'rxjs': {
                    format: 'global',
                    defaultExtension: 'js'
                }
            },

            paths: {
                'angular2/*': 'scripts/angular2/*',
                'rxjs/*': 'scripts/rxjs/*'
            }
        });


         System.import('/bundles/frontall').then(function () {
            Promise.all([
                System.import('/bundles/zopim'),
                System.import('/bundles/raphael'),
                System.import('bundles/angular2'),
                @RenderSection("asyncScripts", required: false)
            ]).then(function () {

            System.import('angular/searchApp');
        });

В пакете frontAll находится файл site.js, где я повторно включаю все компоненты: 

function componentInit() {

//init material design
$.material.init();

//init texarea autosize
autosize($('textarea'));

//init parallax
$('.parallax-window').parallax();

//init smooth scroll
//SmoothScroll();

//init css3 animate it
$.animateIt();
$.doTimeout();
$.animateItInit();

$.srSmoothscroll({
    step: 80,
    speed: 90,
    ease: 'linear',
    target: $('body'),
    container: $(window)
});  
}

$(function () {
    componentInit();

});

$(document).on('page:load', function () {
    componentInit();
});

Версия Angular 2-бета 7. Кто-нибудь знает, в чем проблема? Большое спасибо!

1 2
javascript typescript systemjs

1 ответ:

Мне нужно добавить это в мое приложение angular2, и оно работает: 

jQuery(function () { 
    bootstrap(searchApp, [ElementRef, TournamentSearchService]); 
}); 
jQuery(document).on('page:load', function () { 
    bootstrap(searchApp, [ElementRef, TournamentSearchService]); 
});
0