These are chat archives for systemjs/systemjs

20th
Jun 2016
Jake Niemiec
@jakeNiemiec
Jun 20 2016 14:35
@NickolasAcosta Barebones bootstrap + jspm https://github.com/jakeNiemiec/jspm_bootstrap
nickolasacosta
@nickolasacosta
Jun 20 2016 20:14
Thanks @jakeNiemiec , I'll take a look. I ended up giving JSPM a shot, it was slightly easier but only because I spent hours and hours messing with systemjs.
Jake Niemiec
@jakeNiemiec
Jun 20 2016 20:16
@NickolasAcosta One thing that worked for me, is to do a fresh jspm init (standard), answer all the questions, and manually jspm install bootstrap etc. for all of my deps.
nickolasacosta
@nickolasacosta
Jun 20 2016 20:17
I did that a few times ha.
i think my trouble was loading jquery into the bundle
so I just stuck a script tag at the top of the index page
but I'm not really satisfied with that solution
I had a similar issue with Reflect.js and angular2
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:29
I keep trying System js to use my libraries (that are apparently CJS format?) but alas, I keep getting require not defined
I'm through SO too :(
nickolasacosta
@nickolasacosta
Jun 20 2016 20:30
i ran into that a couple times last night
im not quite sure what I did to fix it tho : /
i know at one point I found multiple versions of jquery floating around in my config.js
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:30
Hmm maybe we could have a quick side-by-side comparison?
Oh the horror
nickolasacosta
@nickolasacosta
Jun 20 2016 20:30
it was easy to fix
im not sure how much help mine would be
its an angular2 app
but i have no problem showing it
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:31
Actually, this is probably related to my basic angular2 problem
I cannot get it to work using System
the generator I used had a good ol' script tag instead
Using System, I basically get the same require problems
nickolasacosta
@nickolasacosta
Jun 20 2016 20:31
disclaimer
I used script tags for jquery and Reflect.js
but i was able to get everything else working
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:32
Curious
What's the go-to tool for sharing snippets of code around here?
nickolasacosta
@nickolasacosta
Jun 20 2016 20:34
if its big I put it in pastebin usually
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:34
would I get shunned for a screenshot
nickolasacosta
@nickolasacosta
Jun 20 2016 20:34
do ```
 your code here
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:35
Ok got a quick screenshot anyway, because it shows the errors alongside
nickolasacosta
@nickolasacosta
Jun 20 2016 20:35
ah, thats an old version of angular
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:36
What why would it be :(
Got the latest one fresh off of npm
if you scroll down to
2.0.0-rc.0 (2016-05-02)
thats the new way to install it
and it stays the same up until the new version i believe
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:37
Woah okay. Second reinstall today then
The other libraries should still have the same problem afterwards though, don't see how Angular 2 affects that
But thanks, will update now!
nickolasacosta
@nickolasacosta
Jun 20 2016 20:40
this site im looking at says require() is provided by systemjs
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:40
Yes it should be, under Common JS format at least
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:49
@NickolasAcosta any chance you can pass me yours?
I'm in so deep right now and it's all a bit messy
nickolasacosta
@nickolasacosta
Jun 20 2016 20:49
sure
i dont have any CJS modules tho
and its jspm
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:49
oh
nickolasacosta
@nickolasacosta
Jun 20 2016 20:49
but actually i have a systemjs one in my commit history i can pull
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:49
:) that'd be great
nickolasacosta
@nickolasacosta
Jun 20 2016 20:51
(function (global) {

  var config = {
    compiler: "typescript",
    map: {
      'jquery': 'node_modules/jquery/dist',
      'bootstrap': 'node_modules/bootstrap/dist/js',
      'zone': 'node_modules/zone.js/dist',
      'reflect': 'node_modules/reflect-metadata',
      'rxjs': 'node_modules/rxjs',
      'src': './',

      'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
      '@angular': 'node_modules/@angular'
    },
    meta: {
      'bootstrap': {
        format: 'global',
        deps: ['jquery']
      },
      'jquery': {
        format: 'global'
      },
      'zone': {
        format: 'global',
      },
      'reflect': {
        format: 'global',
      },
    },
    packages: {
      'jquery': { main: 'jquery.js', defaultExtension: 'js' },
      'bootstrap': { main: 'bootstrap.js', defaultExtension: 'js' },
      'zone': { main: 'zone.js', defaultExtension: 'js' },
      'reflect': { main: 'Reflect.js', defaultExtension: 'js' },
      'rxjs': { main: 'Rx.js', defaultExtension: 'js' },
      'src': { main: 'main.js', defaultExtension: 'js' },
      '@angular/common': { main: 'index.js', defaultExtension: 'js' },
      '@angular/compiler': { main: 'index.js', defaultExtension: 'js' },
      '@angular/core': { main: 'index.js', defaultExtension: 'js' },
      '@angular/http': { main: 'index.js', defaultExtension: 'js' },
      '@angular/platform-browser': { main: 'index.js', defaultExtension: 'js' },
      '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
      '@angular/router-deprecated': { main: 'index.js', defaultExtension: 'js' },
      '@angular/testing': { main: 'index.js', defaultExtension: 'js' },
      '@angular/upgrade': { main: 'index.js', defaultExtension: 'js' }
    }
  }

  System.config(config);

})(this);
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:51
Aha that'
nickolasacosta
@nickolasacosta
Jun 20 2016 20:51
worth noting that this isnt compltely right
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:51
s how you point at index.js
nickolasacosta
@nickolasacosta
Jun 20 2016 20:52
my meta stuff wasn't working and I had to use script tags for that stuff
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:52
shudders
nickolasacosta
@nickolasacosta
Jun 20 2016 20:52
yeah man i havent had a good time
but it's something we gotta learn
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:53
I had to create a really quick presentation so though hey I'll pick up Angular 2 in the meantime
use a generator too, that's usually easiest
horrible decisions, both of em
nickolasacosta
@nickolasacosta
Jun 20 2016 20:53
ha
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:53
I expected the transition to somehow be more smooth
nickolasacosta
@nickolasacosta
Jun 20 2016 20:53
ive basically used this side project to mess with angular since like beta 10 or something
and every time it upgrades i just try to fix it
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:54
hah brave
nickolasacosta
@nickolasacosta
Jun 20 2016 20:54
i spend more time trying to get it set up than I do actually using angular
also, that file gets passed to the bundler
if i do the dynamic load it takes forever
its kind of unbearable
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:57
Because of separate loads?
nickolasacosta
@nickolasacosta
Jun 20 2016 20:57
yeah
it turns into something like 200 or 300 http requests
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:57
Least of my worries right now, but good point
ugh
That's why most modules supply those bundles I guess
nickolasacosta
@nickolasacosta
Jun 20 2016 20:57
yea
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:57
It's those I've been importing so far
But this one library demands systemjs be used
nickolasacosta
@nickolasacosta
Jun 20 2016 20:58
ultimately, I took the time to try to understand systemjs as much as I could
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:58
Probably pays off in the end
nickolasacosta
@nickolasacosta
Jun 20 2016 20:58
and then decided that jspm knows more than me
:)
but knowing systemjs helps me debug jspm if it does weird things
i use the term "knowing" loosely
Ruben Vereecken
@rubenvereecken
Jun 20 2016 20:59
it's too arcane
I managed to get back to my previous problem :)
index.ts:6Uncaught TypeError: require is not a function(anonymous function) @ index.ts:6
angular2-polyfills.js:1243 Error: (SystemJS) Error: http://localhost:3000/node_modules/@angular/core/index.js did not call System.register or AMD define. If loading a global module configure the global name via the meta exports property for script injection support.(…)
I feel like I'm so close
nickolasacosta
@nickolasacosta
Jun 20 2016 21:02
do those modules need an export?
on the meta object?
Ruben Vereecken
@rubenvereecken
Jun 20 2016 21:02
You mean this object right
      System.config({
        defaultJSExtensions: true,
        packages: {
          "@angular/common": { main: 'index.js', defaultExtension: 'js' },
          "@angular/compiler": { main: 'index.js', defaultExtension: 'js' },
          '@angular/core': { main: 'index.js', defaultExtension: 'js' },
          '@angular/http': { main: 'index.js', defaultExtension: 'js' },
          '@angular/platform-browser': { main: 'index.js', defaultExtension: 'js' },
          '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
          '@angular/router-deprecated': { main: 'index.js', defaultExtension: 'js' },
          '@angular/testing': { main: 'index.js', defaultExtension: 'js' },
          '@angular/upgrade': { main: 'index.js', defaultExtension: 'js' },
          '@angular': { format: 'cjs' }
        }, 
        map: {
          "@angular": "node_modules/@angular",
        }
      });
Actually I don't know the diff between packages and meta I'll read up on that
nickolasacosta
@nickolasacosta
Jun 20 2016 21:03
meta is for shimming old style scripts
i believe
Ruben Vereecken
@rubenvereecken
Jun 20 2016 21:13
Actually, the problem seems to have shifted from require not defined to require not a function
Progress? Perhaps. Change, at the least
Ruben Vereecken
@rubenvereecken
Jun 20 2016 21:18
Progress!
<!-- <script src="node_modules/systemjs/dist/system-csp-production.src.js"></script> --> <script src="node_modules/systemjs/dist/system.src.js"></script>
That first version does not support CJS etc
Ruben Vereecken
@rubenvereecken
Jun 20 2016 21:27
@NickolasAcosta I'm really close, where do you import bootstrap from?
nickolasacosta
@nickolasacosta
Jun 20 2016 21:27
lemme see..
Ruben Vereecken
@rubenvereecken
Jun 20 2016 21:27
import {bootstrap} from '@angular/platform-browser';
Doesn't work anymore
Error: (SystemJS) TypeError: bootstrap is not a function(…)
nickolasacosta
@nickolasacosta
Jun 20 2016 21:28
import {bootstrap}    from "@angular/platform-browser-dynamic";
i THINK the one you are using is precompiled templates?
I am not sure though
Ruben Vereecken
@rubenvereecken
Jun 20 2016 21:28
Yes
You were right about load times
nickolasacosta
@nickolasacosta
Jun 20 2016 21:30
haha
Ruben Vereecken
@rubenvereecken
Jun 20 2016 21:31
It still doesn't work, but it takes a while for it to crash now
Which is possibly worse
Gives you hope...
Error: (SystemJS) EXCEPTION: Error during instantiation of NgZone! (ApplicationRef -> ApplicationRef_ -> NgZone).(…)
Jake Niemiec
@jakeNiemiec
Jun 20 2016 21:43
This message was deleted
Ruben Vereecken
@rubenvereecken
Jun 20 2016 22:03
@NickolasAcosta maybe pass slightly more of your snippets? They seem to be working nicely
My View is undefined
import {Component, View} from '@angular/core';
Ruben Vereecken
@rubenvereecken
Jun 20 2016 22:13
Oh my it works.
Kudos Nickolas