These are chat archives for systemjs/systemjs

28th
Mar 2016
Jeff
@Jefftopia
Mar 28 2016 18:04

System JS is tough.

I currently have a foot in each door, loading some files via System, and others through plain old <script> tags. I want to go one way or the other; fully system loaded or just use web-ready build files.

One of the issues I'm having with going all System is that in a standard Angular 2 project, there are 431 requests, transferring 5 MB of data. This seems pretty heavy.

I'm also running into an issue where one small dependency has bad package.json info. This breaks the whole app, because System.importthrows an error.

Any suggestions? Is there a cleaner way to go all-in with System, or do people just bundle their projects?

Manuel Pacheco
@ShadowManu
Mar 28 2016 18:32
@Jefftopia for the production worries, take a look of SystemJS builder. For the package error, well why not opening an issue to fix it? If it's something small you can open a PR or just use self-managed code.
Peter Müller
@Munter
Mar 28 2016 18:35
Bad package.json can be fixed with a PR to the origin protect or an override in the jspm registry
Mohammed Tareq
@MTareq
Mar 28 2016 18:52
dreaded be me i tried to bundle an angular 2 app and all hell broke loose, after finding my way around dirs and paths since the app sets inside a django project, i tried to bundle it first but i kept hitting "missing cryptojs" error so flagged angular2 and reflect-metadata with {"build":false} in my config and was able to bundle, figureing system will take care of importing angular and reflect-metadata like always, but it gives me cryptojs not found on fetch while loading the app(with a root path not even jspm_packages path)
Peter Müller
@Munter
Mar 28 2016 18:53
Doesn't angular distribute a prebuilt version of angular 2? This should be what you consume I think
Mohammed Tareq
@MTareq
Mar 28 2016 18:55
the crazy thing, the later issue persist even after unbundleing
Daphne Maddox
@laurelnaiad
Mar 28 2016 18:57
@MTareq you need to load two things very early: an es6 shim (es6-shim or core-js) and angular2-polyfills. If you get those two things accomplished in the right order (which I believe depends on whether you’re using es6-shim or core-js), then you won’t have to worry about loading reflect-metadata or zone.js.

and if you are missing crypto, you can fix it with

        "map": {
          "crypto": "@empty"
        },

If you were to use the jspm registry version, I believe it takes care of that, but I also believe it might be out of date.

Mohammed Tareq
@MTareq
Mar 28 2016 18:59
This message was deleted
Daphne Maddox
@laurelnaiad
Mar 28 2016 18:59
replace 1 and 2 above with angular2-polyfills.
Mohammed Tareq
@MTareq
Mar 28 2016 19:00
1 import 'zone.js';        
    2 import 'reflect-metadata';
~   3 import 'es6-shim/es6-shim.js';
    4 import 'angular2/es6/dev/src/testing/shims_for_IE.js';
    5 import 'angular2/bundles/angular2-polyfills.js';
    6 import 'rxjs/Rx';
so 5 instead 1&2
Maxime Veber
@Nek-
Mar 28 2016 19:01
I arrive in the middle of nowhere but... Basically you're trying to bootstrap an angular2 app with typescript and systemjs ?
Jeff
@Jefftopia
Mar 28 2016 19:02

@MTareq Missing crypto is a problem I had too earlier. Some downstream dependency has a bad package.json. It's not the only bad dependency though - that's why this is so frustrating. System/JSPM want to suck up all the unbundled/non-build JS, which is ridiculous. you get way too many GETS and it's incredibly brittle.

Instead of using the builder, I'm just using the TypeScript outFile option and building a single JS file. It's not as optimized as the System builder, but it's much, much easier to get going.

Maxime Veber
@Nek-
Mar 28 2016 19:03
hum
I had this issue
but I fixed it, don't remember how...
Mohammed Tareq
@MTareq
Mar 28 2016 19:04
@Jefftopia i use es6, same solution..?
Jeff
@Jefftopia
Mar 28 2016 19:04

@ShadowManu @Munter Thanks for the suggestions. At some point I want to get to know the System builder, because it's a great tool, but for now there's just too much overhead starting a project with JSPM.

Yes, at some point I'll file a PR, and hopefully someone will fix. Otherwise I have to start forking things and it quickly gets ugly.

Maxime Veber
@Nek-
Mar 28 2016 19:05
oh !
For crypto issue you have to modify manually your config.js file
And set it to @empty : "crypto": "@empty",
Jeff
@Jefftopia
Mar 28 2016 19:05
@laurelnaiad @Nek- You can also just do meta: 'angular2/*: { deps: [ 'zone.js', 'reflect-metadata' ] }' right?
@Nek- I fixed the crypto problem by just installing it by hand.
So we're up to - what - 433 file requests now? Absurd.
Maxime Veber
@Nek-
Mar 28 2016 19:07
afaik it's a library for nodejs, and it's not needed on the front (and it should never be load, it looks like an issue of zone)
Peter Müller
@Munter
Mar 28 2016 19:07
Everyone has run into this and have their own fixes, but noone has bothered to send a proper override to the jspm registry? You are not helping the community
Maxime Veber
@Nek-
Mar 28 2016 19:07
^^'
Peter Müller
@Munter
Mar 28 2016 19:07
If you had sent in the override noone would ever run into this problem again
Daphne Maddox
@laurelnaiad
Mar 28 2016 19:08
afaik the registry is more or less correct but not up to date with beta12. There’s already an issue discussing this.
Jeff
@Jefftopia
Mar 28 2016 19:08
@Munter I know, I am sorry. It's hard to know what problems are real and what problems are uniquely yours when there are so many new dev toys.
These problems aren't consistently documented and they're spread out in a bunch of different, sometimes conflicting threads. <_<
@laurelnaiad Thanks for that note. Like I said, tough to keep up with everything.
Mohammed Tareq
@MTareq
Mar 28 2016 19:19
yep installing crypto and then mapping it to reflect-metadata, did it for me
Jeff
@Jefftopia
Mar 28 2016 19:22
@MTareq Good, glad that worked. Imo, there's still something wrong with indiscriminately loading everything in the tree, but that's by design.
Mohammed Tareq
@MTareq
Mar 28 2016 19:25
^ yea, the bundle is very bloated for a small app, i thought otherwise
Daphne Maddox
@laurelnaiad
Mar 28 2016 19:28
@MTareq that’s not how to do it.
indiscriminately loading everything isn’t necessary
you should discriminately load an es6 shim library and angular2-polfills and fix system.js config such that you don’t need crypto.
Jeff
@Jefftopia
Mar 28 2016 19:32
Right, you should do that, but if you setup your project with JSPM, it'll write all those dependencies to your config.
I find that odd. System loads our modules, JSPM bundles, but don't use JSPM to install packages.
Daphne Maddox
@laurelnaiad
Mar 28 2016 19:34
i just use jspm to install npm/github packages and almost never use the registry.
if you want to “do it right”, just copy what’s in in here (https://github.com/jspm/registry/blob/master/package-overrides/npm/angular2%402.0.0-beta.8.json) and update the version numbers to current… hint: it goes in your package.json file.
this part seems unnecessary now, though.
  "meta": {
    "src/core/util/decorators.js": {
      "deps": ["reflect-metadata"]
    }
but who knows. I know I didn’t need to include it (yet).
this is what i have in my package.json
    "overrides": {
      "npm:angular2@2.0.0-beta.12": {
        "dependencies": {
          "zone.js": "npm:zone.js@0.6.6",
          "rxjs": "npm:rxjs@5.0.0-beta.3",
          "reflect-metadata": "npm:reflect-metadata@0.1.3"
        },
        "ignore": [
          "examples"
        ],
        "map": {
          "crypto": "@empty"
        },
        "jspmNodeConversion": false
      }
    }
Jeff
@Jefftopia
Mar 28 2016 19:39
I'm confused. You said you install from github, but doesn't your package.json say you're using the npm registry?
Also, even if you install from github, won't JSPM still give you maps to node-style index.js files, which causes the regressive inclusion of deeper npm dependencies?
Daphne Maddox
@laurelnaiad
Mar 28 2016 19:40
me? I said I don’t generally use jspm registry when I run the jspm cli… so I’m almost always letting the npm modules just land.
Jeff
@Jefftopia
Mar 28 2016 19:41
@laurelnaiad Right. So JSPM is still going to write that huge map to your config.js, right?
Daphne Maddox
@laurelnaiad
Mar 28 2016 19:41
I did refer to angular2’s registry entry while in conversation over how to get my app configured, For me, really the key was the crypto override. Everything else way probably not even necessary.
Mohammed Tareq
@MTareq
Mar 28 2016 19:41
correct me if i am wrong here, but you seem to still have reflect and zone as dependency while you mentioned only using angular2-polyfills
Daphne Maddox
@laurelnaiad
Mar 28 2016 19:41
exactly. I think that part of my config is useless cruft.
pretty sure this is all I really needed.
    "overrides": {
      "npm:angular2@2.0.0-beta.12": {
        "map": {
          "crypto": "@empty"
        }
      }
    }
but one way or the other you do want to make sure you have the right version of rxjs.
jspm does write a huge map to my config. I don’t worry too much about that. i know what I import.
Jeff
@Jefftopia
Mar 28 2016 19:48
@laurelnaiad What script tags do you use in your HTML markup?
Daphne Maddox
@laurelnaiad
Mar 28 2016 19:53
  <script type="text/javascript" src="jspm_packages/system.js"></script>
  <script type="text/javascript" src="config.js"></script>
  <script type="text/javascript">
    System.import('/main')
    .then(null, console.error.bind(console));
  </script>
main is
import 'core-js/client/shim'
import 'angular2/bundles/angular2-polyfills’
// etc.
which feels pretty far from “indiscriminately loading stuff” :)
Mohammed Tareq
@MTareq
Mar 28 2016 20:08
alright @laurelnaiad solution got my bundle from 4 mb to 3.5 mb which is progress, ill probably look into my imports for redundancy i have seen in the bundle map
Daphne Maddox
@laurelnaiad
Mar 28 2016 20:09
make sure you uninstall process and crypto if you have them installed. They shouldn’t be in the picture.
of course I don’t really know what’s making up your 3.5mb.
Jeff
@Jefftopia
Mar 28 2016 20:11
@MTareq The key is to write your own config.js, and not rely on JSPM's. JSPM dumps everything into your config when you jspm install things.
which results in >400 GETs
Thomas Sieverding
@Bajix
Mar 28 2016 20:12
Eh? You can use jspm install -o to apply overrides
Those get stored in package.json, and doing so prevents your config.js from exploding
Mohammed Tareq
@MTareq
Mar 28 2016 20:12
@Jefftopia well thats scary, i remember from GuyBrads talk, all you need is a single install and a single import
Thomas Sieverding
@Bajix
Mar 28 2016 20:13
@MTareq Instead of updating your config directly, use the -o flag and pass in an override
jspm install npm:angular -o “{ map: { crypto: ‘@empty’ } }”
Jeff
@Jefftopia
Mar 28 2016 20:15
@MTareq And Guy isn't wrong. That approach works provided your dependencies are in order. But it's not efficient when you have hundreds of dependencies.
Thomas Sieverding
@Bajix
Mar 28 2016 20:17
If you want to get your dependencies down, your best bet is to use lib/files/ignore
If a dependency has something like a dist folder, use -o “{ directories: { lib: ‘dist’ }}"
Suddenly you’re not downloading all the other stuff
Jeff
@Jefftopia
Mar 28 2016 20:20
@Bajix That sounds nice. Link to docs on this?
Thomas Sieverding
@Bajix
Mar 28 2016 20:20
The other trick is to use files to whitelist dependencies: ie jspm install highcharts -o “{ directories: { lib: ‘lib’ }, files: [‘lib/highcarts.src.js’], main: ‘highchats.src.js’ }"
This example alone cut out 90mb in example assets
Those are the different params you can play with
Jeff
@Jefftopia
Mar 28 2016 20:54

I'm troubling shooting an error, wondering if anyone here has insights. A very far downstream dependency, diffue-hellman has the following line:

 var primes = require('./lib/primes.json!systemjs-json');

When System JS loads this in the browser, it errors, because

Error loading http://localhost:2928/web/jspm_packages/npm/diffie-hellman@5.0.2/lib/primes.json.js as "./lib/primes.json" from http://localhost:2928/web/jspm_packages/npm/diffie-hellman@5.0.2/browser.js

notice that the file is called primes.json.js. What's up with that?

Adam Ness
@greylurk
Mar 28 2016 20:54
Anyone here run into odd issues with Safari and JSPM/Babel?
I have an app that's currently all ES4, and as soon as I add a single bit of ES5 code, it works fine in every browser except Safari.
In safari, none of my SystemJS loaded code runs at all, and there's no error message in the console.
Thomas Sieverding
@Bajix
Mar 28 2016 20:55
@Jefftopia Use jspm install json, then import as require(‘./lib/primes.json!’)
Adam Ness
@greylurk
Mar 28 2016 20:59
s/ES4/ES6/ I was thinking ES2015, the numbers still confuse me.
Regardless, as soon as my code goes through transpilation, it all starts silently failing in Safari