Currently, I am utilizing async script loading with SystemJS for jQuery, Angular2, and other scripts. My goal now is to integrate Turbolinks into this setup. Despite everything functioning correctly, I am encountering an issue where my Angular component only renders the first time. When navigating to the next page using Turbolinks, the component fails to render. Interestingly, there are no errors visible in the object inspector, and the source code only displays:
<search-app></search-app>
I have attempted to debug in the object inspector, but after progressing to the second page, only the HTML tag remains.
Below are the scripts being loaded via SystemJS in the Head tag of my page:
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');
});
Within the frontAll bundle lies the file site.js, where all components are re-initialized:
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();
});
The Angular 2 version being used is beta 7. Can anyone pinpoint the cause of this issue? Thank you!