Search code examples
javascriptangularsystemjs

how to use Angular2, systemjs locally WITHOUT node.js/npm?


This is the index.html with angular-alpha35:

    <html>
    <head>
        <meta charset="UTF-8">
        <base href="/">
        <title>APP Ang2</title>
        <script src="scripts/traceur-runtime.js"></script>
        <script src="https://jspm.io/[email protected]"></script>
        <script src="scripts/bundle35/angular2.dev.js"></script> 
        <script src="scripts/bundle35/router.dev.js"></script>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>

        <app>Loading...</app>

        <script>System.import('app').catch(console.log.bind(console));</script>

    </body>
    </html>

And it works fine if there is internet connection and system.js can be loaded. If I try to get a local copy of system.js like this:

<script src="scripts/[email protected]"></script>

then nothing works until I put rx.js in the root folder and put this line at the end of the file:

    <script src="scripts/[email protected]"></script>
</body>
</html>

then System.js works fine, but in this case, there is a strange problem with angular2 bindings. they are not working until I do some interaction with the page (submit a form, open a select, make some div change its dimensions even with simple hidden, etc..). As soon as something changes on the page, all bindings get to work and the page gets resurrected.

How to make all this work locally without node.js and without internet connection?


Solution

  • Thanks to Arnaud Boeglin's idea of difference in packages' version, I checked with es6-module-loder and by chance this installation works perfectly (so far I didn't find any problem):

        <script src="scripts/traceur-runtime.js"></script>
        <script src="scripts/es6-module-loader.js"></script>
        <script src="scripts/[email protected]"></script>
        <script src="scripts/bundle35/angular2.dev.js"></script> 
        <script src="scripts/bundle35/router.dev.js"></script>
    

    The es6-module-loader has to be before the systemjs in <head> tag.