CODEWITHSUNDEEP
angularangular-rc5
Tom
Tom

Reputation: 8681

Uncaught ReferenceError: System is not defined in Angular 2

I am working on angular 2 application that is 2.0.0-rc.4 version. While running to project I am getting error Uncaught ReferenceError: System is not defined in the index.html file Could somebody tell me what the problem could be

Snapshot of the errors enter image description here

Snapshot of the exact point where the error is occuring

enter image description here

Index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Analytics Platform</title>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <!--<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimal-ui">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" href="/ipad.png" />
    <link rel="stylesheet" href="/app/styles/platform.css">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/app/styles/vendor/vex.min.css">
    <link rel="stylesheet" href="/app/styles/vendor/vex-theme-default.min.css">
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    </script>
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="/libs/core-js/client/shim.min.js"></script>
    <script src="/libs/zone.js/dist/zone.js"></script>
    <script src="/libs/reflect-metadata/Reflect.js"></script>
    <!--build:js /app/dist/lib.js-->
    <script src="/libs/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="/app/systemjs.config.js"></script>
    <!--/build-->
    <!--build:js /app/dist/app.js-->
    <script>
        System.import('app/bootstrap').catch(function (err) { console.error(err); });
    </script>
    <!--/build-->

    <base href="/" />
</head>

<!-- 3. Display the application -->
<body>
    <analytics-app>
        <style>
            div.main {
                width: 350px;
                background: white;
                position: relative;
                top: 200px;
                margin: 0 auto;
                padding: 20px;
            }

            .main table tr td {
                vertical-align: middle;
            }

            .main table {
                width: 100%;
            }

            .main span {
                padding-left: 5px;
            }
        </style>
        <div class="main">
            <table>
                <tr>
                    <td><img src="/app/assets/img/ajax-loader.gif" /></td>
                    <td><span>This Analytics model is loading. Please stand by.</span></td>
                </tr>
            </table>
        </div>
    </analytics-app>
</body>
</html>

The application path

enter image description here

Upvotes: 0

Views: 230

Answers (0)

Related Questions