index.html

<HTML>
<head>
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script>
        var isDevMode = window.location.search.substring(1).indexOf('dev') >= 0;
        if (isDevMode) {
            loadTypeScript();
        }
        function loadTypeScript() {
            var ts_script_tag = document.createElement('script');
            ts_script_tag.setAttribute('src', 'node_modules/typescript/lib/typescript.js');
            document.head.appendChild(ts_script_tag);
        }
        System.config({
            transpiler: isDevMode ? 'typescript' : false,
            packages: {
                src: {
                    defaultExtension: isDevMode ? 'ts' : 'js'
                }
            }
        });
        setTimeout(function () {
            // this is a hack to wait for typescript library to be completely loaded. sure there must be easiear ways to load and wait for dynamic lib loading.
            System.import('src/myApp').catch(console.error.bind(console));
        }, 1000);
    </script>
</head>
<body>
<div ng-controller="myController">
    <h1>Hello World</h1>
    <h2>{{ myVar }}</h2>
</div>
</body>
</HTML>