HTML Page displays fine individually but not in angular project

Question

My problem is that when I paste this code into my angular project (in the component.html part), it does not appear.

How ever, it works fine as an individual html document.

I have this HTML code (taken off of sample):

    <!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript">
    window.onload = function () {

      var dps = [{x: 1, y: 10}, {x: 2, y: 13}, {x: 3, y: 18}, {x: 4, y: 20}, {x: 5, y: 17},{x: 6, y: 10}, {x: 7, y: 13}, {x: 8, y: 18}, {x: 9, y: 20}, {x: 10, y: 17}];   //dataPoints. 

      var chart = new CanvasJS.Chart("chartContainer",{
        title :{
            text: "Stocks"
        },
        axisX: {                        
            title: "Axis X Title"
        },
        axisY: {                        
            title: "Units"
        },
        data: [{
            type: "line",
            dataPoints : dps
        }]
      });

      chart.render();
      var xVal = dps.length + 1;
      var yVal = 15;    
      var updateInterval = 1000;

      var updateChart = function () {


        yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
        dps.push({x: xVal,y: yVal});

        xVal++;
        if (dps.length >  10 )
        {
            dps.shift();                
        }

        chart.render();     

    // update chart after specified time. 

};

setInterval(function(){updateChart()}, updateInterval); 
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
</body>
</html>

I created a component, stocks, and withing stocks.component.html, i placed this code. There is no graph displaying. However, if i add text inside the body, it displays fine.

What am i doing wrong here?

score 2 · Answer 1 · answered Aug 01 '18 at 16:36

The HTML associated with a component is just an HTML fragment, not an HTML page. It should not include the <html> or <head> tags. This is because the fragment defined in the component is inserted into the index.html page.

And for security purposes, Angular strips out any <script> tags. So that is why it won't work.

See this post for more information: How to load script file from component html?

HTML Page displays fine individually but not in angular project

1 Answers1