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

javascript angular systemjs

15,735

Solution 1

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.

Solution 2

You should include the sfx version of angular 2 like this:

<script src="https://code.angularjs.org/2.0.0-alpha.32/angular2.sfx.dev.js"></script>

Note that it's a self contained js file you can download locally.

Check this sample project I made in github:

https://github.com/alfonso-presa/angular2-es5-sample

Edit: Check this SO question for more clarification on what sfx means: Difference between angular.dev.js and angular.sfx.dev.js

15,735

Author by

kakaja

Updated on June 16, 2022

Comments

kakaja about 2 years

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?