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

Question

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?

I would change the tag angularjs for angular2 or something that is actually related to angular2. Then, node.js is server-side, you can serve your angular2 app using a simple http. For systemjs it is a tricky thing. I struggled myself and it seems that the online version from jspm is different than the one you get from packages. Also, all of this will be wrapped in a better way once the final version approaches. In the meantime you could go with this seed project that gives a little structure, a gulp setup, and handles dependencies : github.com/mgechev/angular2-seed — Arnaud Boeglin
– Arnaud Boeglin, Commented Aug 26, 2015 at 10:58
Thank you for your comment. I have changed the tags. I've seen this seed project, but I really want to do without node/gulp. And it works without, just that I'm dependent on systemjs downloaded each time. I'll try to check the version of jspm in packages, maybe if I include that one, it will work. I think that it's completely not logic that I can't do all this locally. — kakaja
– kakaja, Commented Aug 26, 2015 at 11:48
Have you added this? System.config({ baseURL: '/scripts' }); — Alfonso Presa
– Alfonso Presa, Commented Aug 26, 2015 at 12:40
Also, without adding rx.js and es6-module-loader, can you check if it's trying to make any requests in the network inspector? — Alfonso Presa
– Alfonso Presa, Commented Aug 26, 2015 at 12:43
if I remove rx and es6-module-loader, and add the config for baseURL, then it loads itself [email protected], which is in /scripts, but then it doesn't find app.js that is at the root — kakaja
– kakaja, Commented Aug 26, 2015 at 12:51

Community · Accepted Answer · 2017-05-23 12:10:04Z

5

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

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Aug 26, 2015 at 12:33

Alfonso Presa

1,0347 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kakaja Over a year ago

Thank you! It is really interesting to see a completely different installation of ng2. Though, for my project I would like to still use system.js

kakaja Over a year ago

Thanks for the link to the clarification.

Community · Accepted Answer · 2017-05-23 12:10:04Z

0

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.

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Aug 26, 2015 at 12:42

kakaja

7342 gold badges10 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related