Thanks for all the suggestions guys it is appreciated. I have no app.js file yet. I only have an index.html file in a custom folder ( I am trying to understand/build things in manageable portions). Layout can be suprisingly difficult!
I think the timeouts are caused simply by bad connections - the site is remote and using 3G to our company VPN.
The next step is to try and add the login page as during testing the page i realised if you haven't logged into mango first the page wont show any of the values. I deliberatly avoided js and css files as it seemed easier to try and put all the functionality in the html file.
Eg) <md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card1').style.display='block'">Unhide Card 1
</md-button>
<md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card1').style.display='none'">Hide Card</md-button>

The very shabby index file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Angular Material Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/resources/angular-csp.css"></link>
<link rel="stylesheet" href="../vendor/angular-material/angular-material.css">
<link rel="stylesheet" href="../vendor/material-design-icons/iconfont/material-icons.css">
<link rel="stylesheet" href="../vendor/mdPickers/mdPickers.css">
</head>
<!-- <body layout="column"> <-->
<div ng-if="appLoading">
<img src="images/loader.gif" alt="App loading.." style="margin-left:50%;margin-top:25%">
</div>
<div ng-cloak> <!-- layout="column" flex> <-->
<!-- Your content here -->
<md-toolbar layout-align="center" class="md-tall" md-colors="{background: 'light-blue'}">
<div class="md-toolbar-tools" layout-align="center center">
<img ng-src="/modules/dashboards/web/EMC Logo.png">
<!-- <h1 class="md-display-3" style="color:white">Karratha Building 4 Generation Management System </h1> <-->
<p class="md-display-2" style="color:white">Karratha Building 4 Generation Management System</p>
<!-- fill up the space between left and right area -->
<span flex></span>
</div>
</md-toolbar>
<md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card1').style.display='block'">Unhide Card 1
</md-button>
<md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card2').style.display='block'">Unhide Card 2
</md-button>
<md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card3').style.display='block'">Unhide Card 3
</md-button>
<md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card4').style.display='block'">Unhide Card 4
</md-button>
<md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card5').style.display='block'">Unhide Card 5
</md-button>
<div flex layout="column" layout-fill>
<div flex-gt-sm="33" flex="50" layout="column" layout-gt-sm="row">
<div layout="row" flex>
<md-card id="card1" class="cardage">
<md-toolbar md-colors="{background: 'light-blue'}">
<div class="md-toolbar-tools">
<div layout="row">
</div>
<h1 class="md-title" style="color:white">Solar</h1>
</div>
</md-toolbar>
<img ng-src="/modules/dashboards/web/solar_240_60pct.png" class="md-card-image" alt="Washed Out">
<md-card-content>
<h2 class="md-title">Now: <ma-point-value point-xid="DP_KAR-MIRB4_854391"></ma-point-value>
<ma-point-statistics point-xid="DP_KAR-MIRB4_854391" from="from" to="to" statistics="statsObj1"></ma-point-statistics>
<div>
Max: {{ statsObj1.maximum.value }}<br>
Min: {{ statsObj1.minimum.value }}<br>
Avg: {{ statsObj1.average.value }}
</div>
</h2>
</md-card-content>
<md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card1').style.display='none'">Hide Card</md-button>
</md-card>
</div>
<div layout="row" flex>
<md-card id="card2" class="cardage">
<md-toolbar md-colors="{background: 'light-blue'}">
<div class="md-toolbar-tools">
<div layout="row">
</div>
<h1 class="md-title" style="color:white">Battery</h1>
</div>
</md-toolbar>
<img ng-src="/modules/dashboards/web/battery_240_60pct.png" class="md-card-image" alt="Washed Out">
<md-card-content>
<!--
<h2 class="md-title"> Battery Power: <br> <ma-point-value point-xid="DP_KAR-MIRB4_597247"></ma-point-value>
</h2> <-->
<h2 class="md-title">Now: <ma-point-value point-xid="DP_KAR-MIRB4_597247"></ma-point-value> <br>
<ma-point-statistics point-xid="DP_KAR-MIRB4_597247" from="from" to="to" statistics="statsObj2"></ma-point-statistics>
<div>
Max: {{ statsObj2.maximum.value }}<br>
Min: {{ statsObj2.minimum.value }}<br>
Avg: {{ statsObj2.average.value }}
</div>
</h2>
</md-card-content>
<md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card2').style.display='none'">Hide Card</md-button>
<!--<md-button ng-style="{color:'blue','font-size':'18px'}"> Button </md-button
-->
</md-card>
</div>
<div layout="row" flex>
<md-card id="card3" class="cardage">
<md-toolbar md-colors="{background: 'light-blue'}">
<div class="md-toolbar-tools">
<div layout="row">
</div>
<h1 class="md-title" style="color:white">GMS</h1>
</div>
</md-toolbar>
<img ng-src="/modules/dashboards/web/battery_240_60pct.png" class="md-card-image" alt="Washed Out">
<md-card-content>
<h2 class="md-title">Now: <ma-point-value point-xid="DP_KAR-MIRB4_859174"></ma-point-value>
<ma-point-statistics point-xid="DP_KAR-MIRB4_859174" from="from" to="to" statistics="statsObj3"></ma-point-statistics>
<div>
Max:{{ statsObj3.maximum.value }}<br>
Min:{{ statsObj3.minimum.value }}<br>
Avg:{{ statsObj3.average.value }}
</div>
</h2>
</md-card-content>
<md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card3').style.display='none'">Hide Card</md-button>
<!--<md-button ng-style="{color:'blue','font-size':'18px'}"> Button </md-button
-->
</md-card>
</div>
<div layout="row" flex>
<md-card id="card4" class="cardage">
<md-toolbar md-colors="{background: 'light-blue'}">
<div class="md-toolbar-tools">
<div layout="row">
</div>
<h1 class="md-title" style="color:white">SoC</h1>
</div>
</md-toolbar >
<img ng-src="/modules/dashboards/web/battery_240_60pct.png" class="md-card-image" alt="Washed Out">
<md-card-content>
<h2 class="md-title">Now: <ma-point-value point-xid="DP_KAR-MIRB4_524460"></ma-point-value> <br>
<ma-point-statistics point-xid="DP_KAR-MIRB4_524460" from="from" to="to" statistics="statsObj4"></ma-point-statistics>
<div>
Max: {{ statsObj4.maximum.value }}<br>
Min: {{ statsObj4.minimum.value }}<br>
Avg: {{ statsObj4.average.value }}
</div>
</h2>
</md-card-content>
<md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card4').style.display='none'">Hide Card</md-button>
<!--<md-button ng-style="{color:'blue','font-size':'18px'}"> Button </md-button
-->
</md-card>
</div>
<div layout="row" flex>
<md-card id="card5" class="cardage">
<md-toolbar md-colors="{background: 'light-blue'}">
<div class="md-toolbar-tools">
<div layout="row">
</div>
<h1 class="md-title" style="color:white">Energy</h1>
</div>
</md-toolbar>
<img ng-src="/modules/dashboards/web/battery_240_60pct.png" class="md-card-image" alt="Washed Out">
<md-card-content>
<h2 class="md-title">Total: <ma-point-value point-xid="DP_KAR-MIRB4_314854"></ma-point-value> <br>
Today: <ma-point-value point-xid="DP_383564"></ma-point-value> <br>
Total $: <ma-point-value point-xid="DP_522056"></ma-point-value> <br>
Today $: <ma-point-value point-xid="DP_293348"></ma-point-value> <br>
</h2>
</md-card-content>
<md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card5').style.display='none'">Hide Card</md-button>
<!--<md-button ng-style="{color:'blue','font-size':'18px'}"> Button </md-button
-->
</md-card>
</div>
</div>
</div>
<div flex layout="column" layout-fill>
<div flex layout="row">
</div>
<div layout="row" layout-xs="column" class="no-errors-spacer">
<md-input-container flex="">
<label>Date preset</label>
<ma-date-range-picker from="from" to="to" preset="LAST_1_DAYS" update-interval="1 minutes"></ma-date-range-picker>
</md-input-container>
<md-input-container flex="">
<label>From date</label>
<ma-date-picker ng-model="from"></ma-date-picker>
</md-input-container>
<md-input-container flex="">
<label>To date</label>
<ma-date-picker ng-model="to"></ma-date-picker>
</md-input-container>
</div>
<ma-point-values point-xid="DP_KAR-MIRB4_597247" values="point1Values" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true">
</ma-point-values>
<ma-point-values point-xid="DP_KAR-MIRB4_854391" values="point2Values" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true">
</ma-point-values>
<ma-point-values point-xid="DP_KAR-MIRB4_859174" values="point3Values" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true">
</ma-point-values>
<ma-point-values point-xid="DP_KAR-MIRB4_524460" values="point4Values" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true">
</ma-point-values>
<ma-serial-chart style="height: 300px; width: 100%" series-1-values="point1Values" series-1-title="Battery" legend="true" balloon="true" export="true" series-2-values="point2Values" series-2-title="Solar" series-3-values="point3Values" series-3-title="GMS" series-4-values="point4Values" series-4-title="SoC" series-4-axis="right" options="{valueAxes:[{title: 'Power(kW)',},{minimum:0,title:'SoC(%)'}]}" >
</ma-serial-chart>
<p>*Savings based on flat 34.9 cent Tarriff* </p>
</div>
</div>
</div>
</div>
<script src="/resources/require.js"></script>
<script src="/resources/loaderConfig.js"></script>
<script src="../js/loaderConfig.js"></script>
<script>require(['mango-3.2/bootstrap']);</script>
<script>require(['dashboards/TestDBoard/app']);</script>
</body>
</html>