I included scripts as follows in angular-cli.json file:
"scripts": [
"assets/app/vendors/js/vendors.min.js",
"app-assets/js/core/app-menu.js",
"app-assets/vendors/js/charts/raphael-min.js",
"app-assets/vendors/js/charts/morris.min.js",
"app-assets/js/scripts/charts/morris/smooth-line.js"
],
Morris js charts are showing when the page is initially loaded but when I'm changing routes I can see that the script files are not loaded. Can anyone help me with this?
Check your scripts, or the third party scripts if their code initializes on the document.ready event. Which means that once your Angular app loads, they will initialize. But when you navigate to another page, Angular will not reload the page (obviously, SPA work that way), it will just render the html and the document.ready will not fire.
What you can do about this is bind the scripts events on page open, instead of the document ready.
Or a more cluttery solution is subscribe to the router events and when the navigation ends load the scripts programatically from the .ts file.
In Angular 2+, the DOM will be re-write whenever a routing happens. So, instead of adding it in angular-cli.json, copy the files to assets folder and then you can dynamically add those files to the DOM while changing the route. `
//app.component.ts
this.router.events.subscribe(event => {
if(event instanceof NavigationStart) {
let node = document.createElement('script');
node.src = path;
node.type = 'text/javascript';
node.async = false;
node.id =id;
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);
}
}
`
I had the exact same problem working with chart js. I was creating the chart using the id of the canvas placed in the html as follows:
this.chart = new Chart('chartCanvas', { ...options } The chart loaded fine on refresh, but when I performed a navigation from a different page, the chart area was blank (no errors)
This solution worked for me - Defined an ElementRef for the canvas and created chart object using the native element from the ElementRef as follows:
.html:
<canvas #chartCanvas id="chartCanvas"></canvas>
.ts file:
@ViewChild("chartCanvas") chartCanvas: ElementRef;
this.chart = new Chart(this.chartCanvas.nativeElement, {
...options
}
